使用 setInterval 循环遍历 div 列表以每 x 秒刷新一次数据答案

【问题标题】：Loop through a list of div using setInterval to refresh data every x seconds使用 setInterval 循环遍历 div 列表以每 x 秒刷新一次数据
【发布时间】：2020-10-04 17:42:55
【问题描述】：

我有一个包含用户帖子/消息列表的页面。当一个帖子被点赞时，我希望它反映所有其他用户，并且根据我的研究 setInterval 可以通过刷新特定内容几秒钟来完成工作。目前，我无法循环浏览所有用户消息并显示更新的点赞数。发生的事情是显示的数字不断变化，并循环遍历单个帖子的所有值。示例：如果我在三个不同的帖子上分别有 1、0 和 2 个赞，则第一个帖子的数字将更改为 1、0 和 2，而不仅仅是显示“1”。说到 AJAX，我是个初学者。

这是我的代码：

Jquery / Ajax

function refreshPostLikes() {
setInterval(function() {
$(".posts .id").each(function() {  //get id for each post
var postid = $(this).attr("value"); 
updatePostLikes(postid);  //pass the postid variable
});
}, 1000);
}


function updatePostLikes(postid) {
$.ajax({
url: "/main/refresh-post-like.php",
type: "post",
data: {postid: postid},  //send data to php file
success: function(data) {
$(".posts .like").html(data);  //output number of likes
}
});
}

PHP 查询

<?php
require_once('../connection.php');

$postID = $_POST['postid'];

$likeCountQuery = "select count(*) as total_likes from posts_likes WHERE like_status=1 AND post_id=".$postID;  //query number of posts with a like
$likeQueryResult = mysqli_query($conn, $likeCountQuery);

while($likeNumber = mysqli_fetch_assoc($likeQueryResult)) {
$likes = $likeNumber['total_likes'];

if($likes != 0) {
echo $likes;
}
else {
echo '';
}
}
?>

【问题讨论】：

#1 考虑一下您是否真的需要该功能，以及您是否想要实现它。您可能很容易最终杀死您的服务器（您每秒为每个用户检查页面上的所有帖子）#2。你能确认你的 ajax 调用得到了正确的喜欢计数吗？ #3 $(".posts .like").html(data); 替换与该选择器匹配的所有元素的 HTML，您需要为您发送的 ID 找到正确的元素
@Lapskaus，#1，还有其他方法吗？还是根本不做会更好？ #2，是的。 #3，怎么样？我尝试使用 $(".posts .like") 添加 .each() 但它似乎仍然不起作用。
最好是反过来，当一个帖子被点赞时，抓住那个事件并更新计数器。
@RST，是的，我已经为喜欢这篇文章的用户提供了这个服务。但是，我希望喜欢的内容实时显示给其他用户，因此我使用 setinterval 来刷新该部分。
我认为对每个 div 都进行请求不是一个好主意。收集它们并执行一个请求并从该响应中更新/填充。

标签： php jquery mysql ajax setinterval

【解决方案1】：

仍然不确定这是最好的方法，但您的代码不起作用的原因是由于在代码的成功部分更新 HTML 时省略了 postid。

function updatePostLikes(postid) {
$.ajax({
url: "/main/refresh-post-like.php",
type: "post",
data: {postid: postid},  //send data to php file
success: function(data) {
$(".posts .like").html(data);  //output number of likes
}
});
}

用这个命令$(".posts .like").html(data); //output number of likes

您正在更新所有这些类指定为相同值的 div。将 postid 设置为 div 的 id 并将命令更改为

$("#postid").html(data); //output number of likes

【讨论】：

【解决方案2】：

不断变化并循环遍历单个值的所有值发帖

发生这种情况是因为没有对需要更新的帖子的引用。您现在所做的是循环浏览具有“.posts .id”类的所有元素，因此更新适用于所有帖子，而不是单个帖子。您应该修改您的函数以使其仅更新该帖子（尝试在 html 中传递一个唯一的 id）

其中 N 是您的帖子的 ID。（例如 postid）

然后使用 this 更新值

function updatePostLikes(postid) {
    $.ajax({
        url: "/main/refresh-post-like.php",
        type: "post",
        data: {
            postid: postid
        }, //send data to php file
        success: function(data) {
            //$(".posts .like").html(data); //output number of likes
            $("#post-"+postid).html(data); // in this way we're get the right post
        }
    });
}

function refreshPostLikes() {
    $(".posts .id").each(function() { //get id for each post
        var postid = $(this).attr("value");
        updatePostLikes(postid); //pass the postid variable
    });

    setTimeout(refreshPostLikes, 1000); //Check every sec if there are update
}

setTimeout(updateChat, 1000); //Start the check

Prevent SQL Injection Escape is not enough

<?php
require_once ('../connection.php');

$postID = $_POST['postid']; //Escape this value before use inside the query see linked question

// NEVER TRUST USER INPUT
//$likeCountQuery it could be used for perform a SQL Injection NEVER TRUST USER INPUT
//NEVER !!!
$likeCountQuery = "SELECT COUNT(*) AS total_likes FROM posts_likes WHERE like_status=1 AND post_id=".$postID;  //query number of posts with a like
$likeQueryResult = mysqli_query($conn, $likeCountQuery);

while ($likeNumber = mysqli_fetch_assoc($likeQueryResult))
{
    $likes = $likeNumber['total_likes'];

    if ($likes != 0)
    {
        echo $likes;
    }
    else
    {
        echo '';
    }
}
?>

【讨论】：