一、业务需求

在开发中,当一个列表页面加载完成后,我需要根据列表每一项的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的循环的更多相关文章

  1. js/jq和a标签(刷新/ajax/对话框/循环/select选中/checkbox选中/id的获取//数据处理成钱的格式)//js/jq分页

    1.刷新 <a href="javascript:history.go(-1)">返回上一页</a><a href="javascript: ...

  2. ajax无限循环

    // 猜你喜欢的无限加载 (function(){ var content = document.getElementsByClassName("content")[0]; var ...

  3. 页面滚动到底部自动 Ajax 获取文章

    页面滚动到底部自动 Ajax 获取文章  代码如下 复制代码 var _timer = {};function delay_till_last(id, fn, wait) {    if (_time ...

  4. Ajax些成绩批量录入

    1.jsp,ajax的循环调用,必须要递归,否则会出错. <%@ page language="java" import="java.util.*" pa ...

  5. ajax里面同步和异步的区别

    同步:js等ajax完成后才继续执行 异步:js不等ajax完成直接执行 这种区别最明显是在ajax在循环里面的时候,如果你的ajax里面的参数跟循环的条件有关,你会发现参数会出现错误,因为异步的话, ...

  6. Ajax写成绩批量录入

    1.jsp,ajax的循环调用,必须要递归,否则会出错. <%@ page language="java" import="java.util.*" pa ...

  7. Jquery AJAX使用踩坑小记

    在使用jquery ajax时,如果其参数是一个json对象,将此参数使用$('#dd').data(param)绑定到一个元素上, 在使用$('#dd').bind('click',function ...

  8. comet在asp.net中的实现

    网上有关“服务器推送”的介绍非常多,其中一种实现方式就是采用comet技术,在浏览器与服务端之间建立一个http协议的“长连接”,所谓“长连接”,就是指浏览器到服务端的http请求不会马上得到服务端的 ...

  9. React 之 组件生命周期

    React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, ...

随机推荐

  1. php内核分析(七)-扩展

    这里阅读的php版本为PHP-7.1.0 RC3,阅读代码的平台为linux. 我们研究下反射这个扩展. 反射这个扩展目录是存在在:ext/reflection.其实里面的代码很简单.一个.h文件,一 ...

  2. Qt 中使用Singleton模式需小心

    在qt中,使用Singleton模式时一定要小心.因为Singleton模式中使用的是静态对象,静态对象是直到程序结束才被释放的,然而,一旦把该静态对象纳入了Qt的父子对象体系,就会导致不明确的行为. ...

  3. iOS 3D 之 SceneKit框架Demo分析

    Scene Kit 是Apple 向 OS X 开发者们提供的 Cocoa 下的 3D 渲染框架. Scene Kit 建立在 OpenGL 的基础上,包含了如光照.模型.材质.摄像机等高级引擎特性, ...

  4. 用Kotlin语言重新编写Plaid APP:经验教训(I)

    原文标题:Converting Plaid to Kotlin: Lessons learned (Part 1) 原文链接:http://antonioleiva.com/plaid-kotlin- ...

  5. jQuery的性能优化

    原文链接:http://www.colotu.com/html/gcs/6.html 现在越来越多的人应用jQuery了,有些同学在享受爽快淋漓coding时就将性能问题忽略了, 比如我. jquer ...

  6. 关于jni编译32位、64位动态库(Android.mk和Application.mk文件)

    最近新项目需要编译64位的动态库,这里记录如何配置. 在jni目录下加入Android.mk和Application.mk文件. Application.mk APP_ABI := armeabi a ...

  7. swift学习笔记4——扩展、协议

    之前学习swift时的个人笔记,根据github:the-swift-programming-language-in-chinese学习.总结,将重要的内容提取,加以理解后整理为学习笔记,方便以后查询 ...

  8. nginx启动、关闭、重启

    1.启动 [root@localhost local]# nginx/sbin/nginx #启动 [root@localhost local]# nginx/sbin/nginx -t #检查配置文 ...

  9. Git 少用 Pull 多用 Fetch 和 Merge

    本文有点长而且有点乱,但就像Mark Twain Blaise Pascal的笑话里说的那样:我没有时间让它更短些.在Git的邮件列表里有很多关于本文的讨论,我会尽量把其中相关的观点列在下面. 我最常 ...

  10. 前端开发---ppt展示页面评论区支持动态交互效果

    1. 工程地址:https://github.com/digitalClass/web_page 网站发布地址: http://115.28.30.25:8029/ 2. 用到的技术主要还是jquer ...