JS循环中Ajax更新innerHTML仅生效最后一次的解决方法咨询

你的问题核心在于循环中使用var声明DOM元素变量，var是函数作用域而非块级作用域。循环执行时，每次迭代都会覆盖这些变量的引用，当异步Ajax的success回调触发时，所有回调都会指向最后一次循环创建的outsubh1元素，导致只有最后一次更新生效。

修复步骤 #

1. 将循环内的var替换为let，让每个循环迭代拥有独立的变量作用域，确保Ajax回调能正确引用当前迭代创建的DOM元素。
2. 修正重复的id属性：HTML中id必须唯一，给每个按钮设置动态id（如outsubs-${i}）。

修改后的JS代码 #

var rows = 8

function shoplist() {
    for (let i = 0; i < rows; i++) {
        // 改用let声明变量，形成块级作用域
        let getdate = getdatedata.value;
        let outsub = document.createElement("button");
        let outsubh1 = document.createElement("h1");
        let outsubh2 = document.createElement("h1");
        // 设置唯一id
        outsub.setAttribute("id", `outsubs-${i}`);
        outsubh1.setAttribute("class", "shopname");
        outsubh2.setAttribute("class", "allprice");
        
        $.ajax({
            url: "test.php",
            method: "post",
            data: {"getdate" : getdate},
            success: function(res) {
                console.log(res);
                // 此时outsubh1是当前循环迭代的独立变量
                outsubh1.innerHTML = res;
            }
        })
        
        outsubh2.innerHTML = "okk"+i;
        outsub.appendChild(outsubh1);
        outsub.appendChild(outsubh2);
        out.appendChild(outsub);
    }
}

额外说明 #

• 由于你的PHP接口返回的是固定的getdate值，所有outsubh1最终会显示相同内容，但每个元素都会被正确更新，不再只生效最后一次。
• 如果需要每次请求返回不同数据，需调整PHP逻辑或传递不同的getdate参数。

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