如何用jQuery循环数组实现批量POST请求？

我明白你遇到的问题了——这是JavaScript里常见的闭包陷阱，再加上你错误地多次绑定了$(document).ready()事件，导致异步回调执行时只能拿到循环的最后一个索引值。咱们一步步来修复并优化你的代码：

问题根源分析 #

1. 重复绑定ready事件：$(document).ready()只需要调用一次，页面就绪后就会执行，你在循环里多次绑定它完全没必要，反而会导致逻辑混乱。
2. 闭包共享变量：循环里的i是外层作用域的变量，$.post是异步操作，当回调函数执行时，循环已经完成，i的值已经变成了pid.length，所以所有回调都会用这个最后值。
3. URL错误：你代码里的$.postURL写的是pid[0]，这会导致所有请求都发到第一个ID的页面，这显然不是你想要的效果。

解决方案 #

这里提供两种可行的实现方式，你可以根据自己的环境选择：

方式一：使用ES6 let（推荐，现代浏览器支持） #

let在循环中会创建块级作用域，每次循环都会生成一个独立的i变量，避免闭包共享问题：

<input name="mif" value="stechnid"/>
<input value="newid" name="mifs"/>
<div id="msginf0"></div>
<div id="msginf1"></div>
<div id="msginf2"></div>
<div id="msginf3"></div>
<div id="msginf4"></div>
<div id="msginf5"></div>
<div id="msginf6"></div>
<div id="msginf7"></div>

<script>
$(document).ready(function(){
    var mif = document.getElementsByName('mif')[0].value;
    var mifs = document.getElementsByName('mifs')[0].value;
    var pid = ["112233", "112234", "12343", "4433", "7357", "272272"];
    
    // 使用let声明循环变量，创建块级作用域
    for (let i = 0; i < pid.length; i++) {
        var txt = mif.replace(/stechnid/ig, pid[i]);
        $.post(`edit_${pid[i]}.xhtml`, {
            ownform: txt,
            msg_separator: "",
            nfv: "msg_separator",
            siteform: mifs,
            action: "edit_WAP2_fchOWN",
            type: "forum",
            hash: ":admin-hash:",
            submit: "submit"
        }, function(data, status) {
            // 这里的i是当前循环的独立变量
            document.getElementById(`msginf${i}`).innerHTML = `success ${i} ${pid[i]} ${txt}`;
        });
    }
});
</script>

方式二：使用立即执行函数表达式(IIFE)（兼容旧浏览器） #

如果你的环境不支持ES6，可以用IIFE来捕获每次循环的i和txt值：

<input name="mif" value="stechnid"/>
<input value="newid" name="mifs"/>
<div id="msginf0"></div>
<div id="msginf1"></div>
<div id="msginf2"></div>
<div id="msginf3"></div>
<div id="msginf4"></div>
<div id="msginf5"></div>
<div id="msginf6"></div>
<div id="msginf7"></div>

<script>
$(document).ready(function(){
    var mif = document.getElementsByName('mif')[0].value;
    var mifs = document.getElementsByName('mifs')[0].value;
    var pid = ["112233", "112234", "12343", "4433", "7357", "272272"];
    
    for (var i = 0; i < pid.length; i++) {
        var txt = mif.replace(/stechnid/ig, pid[i]);
        // 用IIFE捕获当前的i和txt
        (function(currentIndex, currentTxt) {
            $.post("edit_" + pid[currentIndex] + ".xhtml", {
                ownform: currentTxt,
                msg_separator: "",
                nfv: "msg_separator",
                siteform: mifs,
                action: "edit_WAP2_fchOWN",
                type: "forum",
                hash: ":admin-hash:",
                submit: "submit"
            }, function(data, status) {
                document.getElementById("msginf" + currentIndex).innerHTML = "success " + currentIndex + " " + pid[currentIndex] + " " + currentTxt;
            });
        })(i, txt);
    }
});
</script>

额外优化建议 #

• 如果你的msginf元素数量和pid长度一致，可以动态创建这些元素，不用手动写多个重复的<div>。
• 如果需要控制请求并发（比如避免一次性发太多请求导致服务器压力大），可以用async/await结合循环实现串行请求：

$(document).ready(async function(){
    var mif = document.getElementsByName('mif')[0].value;
    var mifs = document.getElementsByName('mifs')[0].value;
    var pid = ["112233", "112234", "12343", "4433", "7357", "272272"];
    
    for (let i = 0; i < pid.length; i++) {
        var txt = mif.replace(/stechnid/ig, pid[i]);
        // 用await等待请求完成再发下一个
        await $.post(`edit_${pid[i]}.xhtml`, {
            ownform: txt,
            msg_separator: "",
            nfv: "msg_separator",
            siteform: mifs,
            action: "edit_WAP2_fchOWN",
            type: "forum",
            hash: ":admin-hash:",
            submit: "submit"
        }).done(function(data, status) {
            document.getElementById(`msginf${i}`).innerHTML = `success ${i} ${pid[i]} ${txt}`;
        });
    }
});

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