如何刷新使用 ajax 从 php 文件调用的外部 div？

Question

假设我有 2 个文件，index.php 和 get_data.php。在 get_data 中，我有一个 sql while 循环从我的数据库输出数据说用户名、图像和自上传以来图像的以秒/计时器为单位的年龄。在索引中，我想调用 get_feed 以显示 while 循环的输出。我只想刷新名为#timer 的计时器 div 而不是其余的数据。我怎样才能做到这一点？现在我只能刷新我在 index.php 中输出到 #response 的所有内容，其中包含图像，因此它会刷新图像，这些图像可能会导致性能下降。

index.php -

<div id="response"></div>

repeatAjax();
function repeatAjax(){
  $.ajax({    
    type: "GET",
    url: "get_feed.php",             
    dataType: "html",                 
    success: function(response){                    
        $("#response").html(response); 
    },
        complete: function() {
           setTimeout(repeatAjax,1000);
       }

    });
};

get_feed.php -

$today_date = date('Y-m-d H:i:s');
$sql = "SELECT image, user, date FROM images";
$result = $conn->query($sql);

if ($result->num_rows > 0) {

while($row = $result->fetch_assoc()) {
   $image = $row['image'];
   $user = $row['user'];
   $date = $row['date'];

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

   echo '<div id="timer">'.$timer.'</div>';
   echo '<div id="user">'.$user.'</div>';
   echo '<img src="'.$image.'" id="image"';
}
} else {
echo "0 results";
}

上面的脚本可能有错误，我只是为这个例子编写的，但我要做的只是每秒刷新一次计时器，而不刷新图像或用户名。我也担心如果服务器无法处理每秒刷新的负载，如果网站上有很多人的话，我的网站就会崩溃..

谢谢！

Answer 1

为避免重复，您不应从查询中获取所有数据，而应使用 where 子句作为日期，因为您使用 'Ymd H:i:s' 格式作为日期，而在 js 中只需附加 div

在 get_feed.php 中：

if(!empty($alreadyAccess)){
  $today_date = date('Y-m-d H:i:s');
  $sql = "SELECT image, user, date FROM images";
}
else{
  $sql = "SELECT image, user, date FROM images where date '$last_access_date'";
}

在 index.php 中将 .html 更改为 .append ：

$("#response").append(response);

Answer 2

我认为这会有所帮助。

尝试替换

 success: function(response){                    
        $("#response").html(response); 
    },

与

success: function(response, status) {
        $("#response").html(response); 
    },

在你的 index.php 中

您修改后的 get_feed.php 以提供两个不同的 html 响应

 $timer=$_GET['tm'];
    $today_date = date('Y-m-d H:i:s');
    $sql = "SELECT image, user, date FROM images";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {

    while($row = $result->fetch_assoc()) {
       $image = $row['image'];
       $user = $row['user'];
       $date = $row['date'];

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

       if($timer)
      {
      echo '<div id="timer">'.$timer.'</div>';
     }
     else
    {     
       echo '<div id="user">'.$user.'</div>';
       echo '<img src="'.$image.'" id="image"';
    }

    }
    } else {
    echo "0 results";
    }

你修改后的 index.php 来处理两个不同的 html 响应

<div id="response_wrapper">
<div id="timer_response"></div>
<div id="remaining_response"></div>
</div>

repeatAjax();
function repeatAjax(){
  $.ajax({    
    type: "GET",
    url: "get_feed.php",             
    dataType: "html",                 
    success: function(response, status) {                    
        $("#remaining_response").html(response); 
    },
        complete: function() {
           setTimeout(repeatAjax,3000);//comment this line of code if you want to prevent further refreshing of image and username
       }

    });
};
repeatAjax2();
    function repeatAjax2(){
      $.ajax({    
        type: "GET",
        url: "get_feed.php?&tm=true",             
        dataType: "html",                 
        success: function(response, status) {                    
            $("#timer_response").html(response); 
        },
            complete: function() {
               setTimeout(repeatAjax2,1000);
           }

        });
    };