ajax的循环
一、业务需求
在开发中,当一个列表页面加载完成后,我需要根据列表每一项的id去服务器端获取对应的数据然后再把获取的数据赋给当前id对应的标签。
例如如下表格:
我有一系列的商品编号,我需要根据商品编号通过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();
});
测试结果如下:
我们可以看到,在循环的内部我们根本取不到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的循环的更多相关文章
- js/jq和a标签(刷新/ajax/对话框/循环/select选中/checkbox选中/id的获取//数据处理成钱的格式)//js/jq分页
1.刷新 <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript: ...
- ajax无限循环
// 猜你喜欢的无限加载 (function(){ var content = document.getElementsByClassName("content")[0]; var ...
- 页面滚动到底部自动 Ajax 获取文章
页面滚动到底部自动 Ajax 获取文章 代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) { if (_time ...
- Ajax些成绩批量录入
1.jsp,ajax的循环调用,必须要递归,否则会出错. <%@ page language="java" import="java.util.*" pa ...
- ajax里面同步和异步的区别
同步:js等ajax完成后才继续执行 异步:js不等ajax完成直接执行 这种区别最明显是在ajax在循环里面的时候,如果你的ajax里面的参数跟循环的条件有关,你会发现参数会出现错误,因为异步的话, ...
- Ajax写成绩批量录入
1.jsp,ajax的循环调用,必须要递归,否则会出错. <%@ page language="java" import="java.util.*" pa ...
- Jquery AJAX使用踩坑小记
在使用jquery ajax时,如果其参数是一个json对象,将此参数使用$('#dd').data(param)绑定到一个元素上, 在使用$('#dd').bind('click',function ...
- comet在asp.net中的实现
网上有关“服务器推送”的介绍非常多,其中一种实现方式就是采用comet技术,在浏览器与服务端之间建立一个http协议的“长连接”,所谓“长连接”,就是指浏览器到服务端的http请求不会马上得到服务端的 ...
- React 之 组件生命周期
React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, ...
随机推荐
- iOS关于模块化开发解决方案(纯干货)
关于iOS模块化开发解决方案网上也有一些介绍,但真正落实在在具体的实例却很少看到,计划编写系统文章来介绍关于我对模块化解决方案的理解,里面会有包含到一些关于解耦.路由.封装.私有Pod管理等内容:并编 ...
- 五步掌握OOM框架AutoMapper基本使用
本文版权归博客园和作者吴双本人共同所有,转载和爬虫请注明原文地址 www.cnblogs.com/tdws 写在前面 OOM顾名思义,Object-Object-Mapping实体间相互转换,Aut ...
- json显示日期带T问题的解决方法
此问题是由Newtonsoft.Json转换json导致的: Newtonsoft.Json产生的默认日期时间格式为: IsoDateTimeConverter 格式 解决方法: 需要引用下面的命名空 ...
- struts2学习之旅三 权限管理和导航设计
1,权限管理的db设计和dao实现,尽量简单快速有效: db的设计如下:权限按照角色来赋给用户: 权限对应每一个具体的功能,有菜单级别的,有导航级别的,还有页面级别的功能: 涉及到权限的敏感操作一般都 ...
- 【夯实PHP基础】php开发时遇到白页的调试方法
本文地址 分享提纲: 1. 设置报错报错级别,显示报错 2. 白页的可能原因 1.[设置报错报错级别,显示报错] php开发时,访问地址也对,但就是不出来页面,显示的是 白的页面,所以就可 ...
- AOS – 另外一个独特的页面滚动动画库(CSS3)
AOS 是一个用于在页面滚动的时候呈现元素动画的工具库,你可能会觉得它和 WOWJS 一样,的确他们效果是类似的.但是AOS是 CSS3 动画驱动的库,当你滚动页面的时候能让元素动起来,当页面滚回顶部 ...
- tableView显示第一个cell有偏移问题
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section { return 0 ...
- 非RootLayer的隐式动画
非RootLayer都有隐式动画,默认0.25秒. // 1.开启 [CATransaction begin]; // 2.设置关闭 YES-关闭:NO-开启 [CATransaction setDi ...
- armv7 armv7s arm64
arm处理器以其低功耗和小尺寸而闻名,几乎所有的手机处理器都是基于arm,在嵌入式系统中应用非常广泛. armv6, armv7, armv7s, arm64指的是arm处理器的指令集. i386 ...
- Windows 批处理设置dns ,解决能上qq不能开网页
对于windows 7 @echo off netsh interface ip set dns "本地连接" static 114.114.114.114 primary net ...