天枫庄资源网

Ajax中的循环方案
网络编程 2024/12/27 佚名
2 0
天枫庄资源网 Design By www.wosibo.com

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中的循环方案，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

标签：
ajax,循环,ajax中的循环
天枫庄资源网 Design By www.wosibo.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
天枫庄资源网 Design By www.wosibo.com

评论“Ajax中的循环方案”

暂无Ajax中的循环方案的评论...
www.wosibo.com 天枫庄资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
天枫庄资源网 Design By www.wosibo.com