使用jQuery load()执行AJAX局部刷新时多元素内容重复如何解决

你遇到的内容重复、服务端收到冗余请求的问题，是对jQueryload()方法的运行逻辑不熟悉导致的，两个核心触发点：

• 批量调用触发多请求：当你用$(".class-to-refresh")这类选择器匹配到N个元素，再链式调用load()时，jQuery会给每一个匹配到的元素单独发起一次HTTP请求，页面上有2个匹配元素就发2次，4个就发4次，这就是服务端日志里冗余请求的来源。
• 内容提取逻辑导致重复插入：load(请求地址 + " 目标选择器")的逻辑是，单元素拿到请求返回的完整HTML后，会把返回内容里所有匹配目标选择器的元素，全部插入到当前调用load()的元素内部。你给N个元素同时执行这个操作，每个元素都会塞入返回结果里的N个匹配块，最终总内容量直接翻倍，N=4时就会出现你说的4条变8条的现象。

另外你贴的复现代码里还多了一层冗余：你先手动调用了一次$.ajax发起GET请求，在成功回调里又调用load()——而load()本身就是封装好的AJAX方法，会自己发请求，这又平白多了一轮无效请求。

方案1：单元素精准匹配调用（保留load写法） #

不要批量给多元素直接调用load，遍历每个待刷新元素时，通过唯一ID精准拉取属于该元素的内容，删掉多余的手动AJAX调用：

$(document).ready(function(){
    setInterval(function() {
        // 遍历所有需要刷新的元素，你的实际场景里元素带唯一id和refresh类
        $(".refresh").each(function() {
            const targetId = $(this).attr("id");
            // 每个元素只拉取返回页面对应id下的container内容，不会混入其他块
            $(this).load(location.href + " #" + targetId + " .container");
        })
    }, 3000)
});

如果是复现demo里的.content类场景，把内容选择器改成" #" + targetId即可。

方案2：单请求批量更新（性能更优，推荐） #

不管页面有多少个待刷新块，每轮定时刷新只发1次HTTP请求，拿到完整页面后手动替换对应内容，大幅减少服务端压力：

$(document).ready(function(){
    setInterval(function() {
        // 仅发起1次GET请求拿完整页面
        $.get(location.href, function(resHtml) {
            // 提取返回页面里所有待更新的container块
            const $newBlocks = $(resHtml).find(".refresh .container");
            // 一一对应替换当前页面的块内容
            $(".refresh .container").each(function(index) {
                $(this).html($newBlocks.eq(index).html());
            })
        })
    }, 3000)
});

• 只要load()的前置选择器匹配到多个元素，就会发起对应数量的请求，非特殊场景不要在多元素上直接调用load()拉取通用类选择器的内容。
• 不要在$.ajax/$.get的回调里再调用load()，避免重复发请求。

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