怎么使用Ajax实现循环

最新推荐文章于 2024-07-03 02:58:30 发布

芬梧书生

最新推荐文章于 2024-07-03 02:58:30 发布

阅读量3.1k

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_42693512/article/details/84338428

版权

在开发中，为了获取列表每一项的详细数据，需要根据商品ID使用Ajax请求服务器。错误的做法是在for循环中直接发起Ajax，由于异步特性，会导致数据无法正确赋值。正确解决方案是采用递归方式实现Ajax循环请求，确保每个请求完成后再处理下一个请求。

摘要由CSDN通过智能技术生成

一、业务需求

在开发中，当一个列表页面加载完成后，我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签。

我有一系列的商品编号，我需要根据商品编号通过ajax到服务器获取商品对应的名称，然后再用js更新界面(实际中的业务当然不是获取商品名称这么简单)

二、实现方案

2.1 错误方案

一般情况下，我们会直接想到，直接写个for循环，在循环内发起ajax请求获取数据，再把获取的数据更新到对应的id对应的标签上，

var array = [1, 3, 2, 5, 3];

循环的ajax请求方法：

function foreach_ajax() {

for (var i = 0; i < array.length; i++) {

$.get("/home/loop_ajax", { value: array[i] }, function (data) {

console.log(array[i]+","+data);

});

}

}

调用：

$(function () {

foreach_ajax(); 

});

我们可以看到，在循环的内部我们根本取不到array[i]的值。

导致这种结果的原因是：ajax是异步执行的，在循环结束的时候第一次ajax还没有将服务器数据返回，而循环结束的时候for中的变量i已经释放了，所以array[i]=undefined