在实际使用中,我们经常会用的Ajax(异步加载,在不刷新整个网页的前提下对网页部分内容进行更新)

使用时,偶尔会遇上需要从一个接口中得到一个数组和数据对应的id,在另一个接口上再得到数据,最初写法如下:

$.get(url_1, function (data) {
var dom = [];
for (var i = 0; i < data.length; i++) {
var item = data[i]; //两个url不一致,根据id查找另一个表
$.get(url_2, function (data) {
var item_result = data;
dom.push("<div> item_result.id</div>");
}); }
$("#id").empty().append(dom.join(''));
});

但是此时经常会出现数组清空后并没有写入数据的问题,初学时常误以为时接口错误的问题,其实不然

这是由于$get()等Ajax方法在调用接口时需要时间,导致push还未完成已经发生了append的行为,即此时数组清空,但是dom数组中此时并没有join读取的数据

故此处需要将循环中的Ajax修改为同步,代码修改如下:

$.get(url_1, function (data) {
var dom = [];
for (var i = 0; i < data.length; i++) {
var item = data[i]; //在第二次的Ajax前将异步改同步
$.ajaxSettings.async = false; //两个url不一致,根据id查找另一个表
$.get(url_2, function (data) {
var item_result = data;
dom.push("<div> item_result.id</div>");
}); //注意在ajax中的push完成后,将其改回异步
$.ajaxSettings.async = true; }
$("#id").empty().append(dom.join(''));
});

jQuery Ajax(异步改同步)的更多相关文章

  1. jquery ajax异步和同步从后天取值

    最近使用jquery的ajax,发现有些效果不对,ajax请求后返回的json串回来了,但是执行顺序有问题. var isReload = false; $.post('/home/DetectCac ...

  2. 使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)

    使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...

  3. Jquery Ajax 异步设置Table中某列的值

    可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...

  4. jquery ajax属性async(同步异步)示例

    在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false,下面举几个jquery ajax同步和异步实例 例1.jquery+ajax/&q ...

  5. JQuery $.ajax(); 异步访问完整参数

    $.ajax 完整参数   jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post ...

  6. jquery Ajax异步请求之session

    写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...

  7. jQuery Ajax(异步请求)

    jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...

  8. jquery ajax异步调用

    写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...

  9. jquery.ajax异步发送请求的简单测试

    使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...

随机推荐

  1. EL表达式的语法与应用

    EL(是Expression Language的缩写),使用EL对JSP输出进行优化,可以使得页面结构更加清晰,代码可读性高,也更加便于维护. EL表达式的语法: 语法:$(EL 表达式) $  和 ...

  2. 常用系统的伪静态规则列表(rewrite)

    以前在云虚拟机上,是在iis上配置伪静态.这次买的一个香港的空间,商家说把伪静态规则直接放在web下即可. 注意,所有规则放在一起可能会有冲突,只放置你需要的规则即可. #shopex4.8 Rewr ...

  3. JS 节点的属性 与 元素

    节点的属性{     nodeType 是节点的类型:     nodeNam 是节点的名字     nodeValue 节点的值 }可以用节点.属性 取得三个属性的值 节点.nodeType 出来的 ...

  4. Qt 学习之路 2(62):保存 XML

    Home / Qt 学习之路 2 / Qt 学习之路 2(62):保存 XML Qt 学习之路 2(62):保存 XML  豆子  2013年8月26日  Qt 学习之路 2  9条评论 前面几章我们 ...

  5. LightOJ - 1197 素数筛

    深夜无事可干啊 #include<bits/stdc++.h> using namespace std; const int maxn = 1e6+11; typedef long lon ...

  6. 在Eclipse中添加Servlet-api.jar的方法

    方法一: 正确的加载servlet-api.jar的方法如下: 1:右击项目工程名称 2:Properties 3:  Jvav Build Path 4:  Libraries 5:  Add Ex ...

  7. js中的table导出成Excel表格

    首先判断手否是IE,原因在于IE导出我用的是ActiveXObject,判断的方式很简单,只需要拿到window.navigator.userAgent即可进行判断,代码如下 function get ...

  8. GreenPlum 大数据平台--备份-邮件配置-gpcrondump & gpdbrestore(五)

    01,备份 生成备份数据库 [gpadmin@greenplum01 ~]$ gpcrondump -l /gpbackup/back2/gpcorndump.log -x postgres -v [ ...

  9. Oracle 单实例数据库安装和real application clusters数据库安装的区别

    在想了解Oracle单实例数据可和RAC数据库前,请确保你已经知道了数据库和实例的关系,如果不了解,请参考Oracle 数据库实例和数据库. 单实例数据库模式 单实例模式下,一个数据库只能通过一个实例 ...

  10. Eclipse的企业开发时常用快捷键使用、优化配置(博主推荐)

    不多说,直接上干货! 一.简介 eclipse可谓是Java开发界的神器,基本占据了大部分的Java开发市场,而且其官方还对其他语言提供支持,如C++,Ruby,JavaScript等等.为什么使用它 ...