DDR爱好者之家

Ajax中的循环方案
站长资源 2024/11/25 佚名
75 1538
DDR爱好者之家 Design By 杰米

Ajax 简介

Ajax 由 HTML、JavaScript"color: #ff0000">一、业务需求

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

例如如下表格：

Ajax中的循环方案

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

二、实现方案

2.1 错误方案

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

如下：

我们以数组模拟一些列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(); 
});

测试结果如下：

Ajax中的循环方案

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

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

2.2 正确方案

正确的方式是以递归的方式循环ajax。

如下：

我们以数组模拟一些列id：

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

递归的ajax请求方法：

function Loop_ajax(index, array) {
if (index < array.length) { 
var value = array[index];
$.get("/home/loop_ajax", { value: value }, function (data) {
console.log(array[index] + "," + data);
if (index < array.length) {
Loop_ajax(index + 1, array); 
}
});
}
}

调用：

$(function () {
Loop_ajax(0, array);
});

测试结果如下：

Ajax中的循环方案

以上所述是小编给大家介绍的Ajax中的循环方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网
DDR爱好者之家 Design By 杰米