如何在不刷新所有 php 数据的情况下刷新 div

Question

我认为这很简单，但我一辈子都弄不明白。我想刷新 div 而不是刷新所有内容。我在每张图片上都有一个计时器，从 24 开始倒计时小时到 0 然后消失.. 一切正常，但我似乎不能只刷新计时器 div..

我的php -

$date = date('Y-m-d H:i:s');

$sql = "SELECT * FROM images";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
while($row = $result->fetch_assoc()) {
    $path = $row['path'];
    $user = $row['user'];
    $update = $row['update_date'];

    $timeFirst  = strtotime($date);
    $timeSecond = strtotime($update);
    $timeSecond = $timeSecond + 86400;
    $timer = $timeSecond - $timeFirst;

if($timer <= 0){

}else{
    echo '<img id="pic" src="/v2/uploads/'.$path.'"/>';
    echo '<div id="user">#'.$user.'</div>';
    echo '<div id="timer">'.$timer.' </div>';

    }
  }
}

我只想以 1 秒的间隔刷新计时器，而不是图像。我知道我可以使用 ajax 从加载所有内容的外部文件调用它，据我所知..还是新的。 *这不是示例代码的全部内容。

Answer 1

将您现有的 php 代码放入单独的 .php 文件

然后使用名为 load() 的 jquery 方法将 php 文件加载到您的 div.

$(document).ready(function() {
    $("#div_ID_you_want_to_load_into").load("your_php_file.php");
    var pollFrequency = function() {
        if (document.hidden) {
            return;
        }
        $("#div_ID_you_want_to_load_into").load('your_php_file.php?randval='+ Math.random());
    };
    setInterval(pollFrequency,18000); // microseconds, so this would be every 18 seconds
});

现在，在上面的这段代码中有些东西不是必需的，但可能会有帮助，那就是 if (document.hidden) {return;}，它基本上是向浏览器发出的命令，如果浏览器选项卡未处于焦点状态，则执行不启动 setInterval 投票。

保留 randval= 数学内容也是一个好主意，只是为了确保没有缓存。

Answer 2

根据我的评论，您可以这样做：

将 class "timer" 添加到您的 #timer 元素（如果您有多个 #timer 元素，请为每个元素使用不同的 ID）。
创建 php 脚本，在调用时 returns 新的 $timer:

ajax-timer.php

<?php

/* include file where $conn is defined */


$response = array();

$date = date('Y-m-d H:i:s');

$sql = "SELECT * FROM images";
$result = $conn->query($sql);
if ($result->num_rows > 0) {
    while($row = $result->fetch_assoc()) {
        $update = $row['update_date'];

        $timeFirst  = strtotime($date);
        $timeSecond = strtotime($update);
        $timeSecond = $timeSecond + 86400;
        $timer = $timeSecond - $timeFirst;


        if($timer > 0) {
            //Add just timer to response array
            $response[] = $timer;
        }
    }
}

//Return json response and handle it later in ajax:
echo json_encode(array(
    'result'=>empty($response) ? 0 : 1,
    'data'=>$response));
die();

使用 $.ajax 从 ajax-timer.php 请求数据并在收到响应时填充数据：

计时器-update.js

var ajaxTimerThread = 0;
var ajaxTimerRunning = false;

function ajaxTimerRun() {
    //Prevent running function more than once at a time.
    if(ajaxTimerRunning)
        return;

    ajaxTimerRunning = true;
    $.post('ajax-timer.php', {}, function (response) {
        ajaxTimerRunning = false;
        try {
            //Try to parse JSON response
            response = $.parseJSON(response);
            if (response.result == 1) {
                //We got timer data in response.data.
                for(var i = 0; i < response.data.length; i++) {
                    var $timer = $('.timer').eq(i);
                    if($timer.length) {
                        $timer.html(response.data[i]);
                    }
                }
            }
            else {
                //Request was successful, but there's no timer data found.
                //do nothing
            }
            //Run again
            ajaxTimerThread = setTimeout(ajaxTimerRun, 1000); //every second
        }
        catch (ex) {
            //Could not parse JSON? Something's wrong:
            console.log(ex);
        }
    });
}

$(document).ready(function() {
    // Start update on page load.
    ajaxTimerRun();
})

如何在不刷新所有 php 数据的情况下刷新 div

how to refresh div without refreshing all php data

javascript

php

ajax

jquery

refresh