JQuery append结合setInterval无法重复追加内容问题排查

你遇到的问题核心大概率是浏览器AJAX请求缓存导致的——虽然你看到控制台每3秒发起了POST请求，但浏览器可能缓存了第一次的响应结果，后续请求直接返回缓存内容，所以你看不到新的时间戳。

具体解决办法 #

方法1：在AJAX请求中禁用缓存并添加唯一标识

修改你的JavaScript代码，给AJAX请求添加cache: false配置，或者额外带上一个随时间变化的参数（比如当前时间戳），让每次请求的“唯一标识”不同，避免浏览器缓存：

$(document).ready(function() {
    function load_friend_request() {
        $.ajax({
            url: "/friend_requests_main_loader.php",
            type: 'POST',
            cache: false, // 强制禁用缓存
            data: { timestamp: new Date().getTime() }, // 添加时间戳参数，确保请求唯一
            success: function(html) {
                $("#friend_request").append(html);
            }
        })
    }
    setInterval(function() {
        load_friend_request();
    }, 2000); // 注意你代码里是2秒，和你描述的3秒不一致，可按需调整
});

方法2：在PHP脚本中设置禁止缓存的响应头

直接在PHP代码开头添加缓存控制的响应头，从服务器层面禁止浏览器缓存这个接口的结果：

<?php
// 禁止浏览器和代理缓存响应
header("Cache-Control: no-cache, no-store, must-revalidate");
header("Pragma: no-cache");
header("Expires: 0");

echo time();
?>

验证步骤 #

你可以打开浏览器开发者工具的「Network」标签，查看每次AJAX请求的「Response」内容：如果之前每次返回的时间都是同一个，那就是缓存问题；修改后应该每次返回不同的时间戳，append也会正常追加新内容。

内容的提问来源于stack exchange，提问作者iamoracle