每次从PHP返回JSON数据时内容重复，调用两次后结果翻倍如何解决？

嘿，这个问题我太熟了！你每次调用readData()的时候，都在给表格追加新内容，而不是替换掉旧的。第一次请求回来5条数据，用append()加到表格里没问题；第二次再执行脚本，又把新获取的5条数据加到已有内容后面，结果自然就变成两倍啦！

解决办法有两种，选哪种都可以： #

• 方法一：先清空表格，再追加新内容
  在构建完html变量后，先把表格里的旧内容清空，再添加新内容。可以在循环结束后、append之前加上$(".contentList table").empty();，这样每次都会先清空旧数据，再放入新数据。

• 方法二：直接用html()替换内容
  把$(".contentList table").append(html);改成$(".contentList table").html(html);，html()方法会直接替换掉元素内的所有现有内容，相当于一键更新，从根源避免重复。

修改后的代码示例（方法二）： #

function readData() {
    $.ajax({
        url: "read.php",
        type: "POST",
        dataType: "json",
        data: { input: 1 },
        cache: false,
        success: function(data) {
            var html = "";
            // 建议给i加上let声明，避免全局变量污染
            for (let i = 0; i < data.length; i++) {
                html += "<tr><td>" + data[i].text + "</td></tr>";
            }
            // 用html()替换append()，直接更新表格内容
            $(".contentList table").html(html);
        },
    });
}

另外顺手提个小建议：你的循环变量i没有用let/var声明，会变成全局变量，可能引发其他潜在问题，记得补上哦！

内容的提问来源于stack exchange，提问作者3D-kreativ