jquery下for循环ajax请求,将每次的返回结果显示在页面中,居然只有最后一次生效了!
问题解释:
在jQuery中,如果你在一个for循环中发起了多个Ajax请求,并且希望每次请求的结果都显示在页面上,但是只有最后一次请求的结果生效了,很可能是因为每次循环中的异步请求都是在上一个请求完成后才开始,导致前面的请求结果覆盖了后面的结果。
解决方法:
- 使用闭包:在for循环中使用一个自执行的函数封装需要的变量,确保每次循环都有独立的作用域。
for (var i = 0; i < n; i++) {
(function(index) {
$.ajax({
url: 'your-url',
success: function(data) {
// 使用index来确定每次循环的结果应该显示在哪里
$('#result' + index).text(data);
}
});
})(i);
}
- 使用Promise和async/await(如果环境支持ES6):确保Ajax请求顺序执行。
async function fetchData() {
for (let i = 0; i < n; i++) {
let data = await $.ajax({ url: 'your-url' });
$('#result' + i).text(data);
}
}
fetchData();
确保你的页面上有足够的元素来显示每次请求的结果,比如:
<div id="result0"></div>
<div id="result1"></div>
<!-- 更多的divs -->
<div id="resultN"></div>
以上方法可以确保每个Ajax请求的结果都按顺序显示在对应的位置上。
评论已关闭