在实际使用中,我们经常会用的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. 帝国cms刷新内容页提示.phome_ecms_news_data_' doesn't exist

    帝国cms后台刷新提示.phome_ecms_news_data_' doesn't exist解决方法: 刷新所有信息内容页面时提示“Table '*.phome_ecms_article_data ...

  2. c语言数据结构学习心得——树

    树 一对多的树型结构,有且只有一个特定的根结点. 结点的度:结点拥有子树的数量{ 度为0:叶子结点/终端结点. 度不为0:非终端结点/分支结点(除去根结点其它称为内部结点).} 树的度:树中所有结点的 ...

  3. Android 开发环境的构建备忘

    准备工作:下载Eclipse.JDK.Android SDK.ADT插件 下载地址:Eclipse:http://www.eclipse.org/downloads/               JD ...

  4. 关于在VS 2013 Reshaper 中不能使用Alt+Enter 的解决

    新装Vs 2013 ,感觉还是不错,但是很恶心的是居然,Resharper 万能的快捷键不能用,让洒家真是恶心极了.   通过Google 在StackOverflow 上发现了解决方法,但好像看他的 ...

  5. 使用Lazy对构造进行重构后比较

    用于测试在是否使用Lazy 的情况下,服务器负载,及服务提供情况对比.     服务器环境:   在此机器上安装了1 Hyper-V ,分配走1G内存,同时在本地上安装 SQLServer ,   在 ...

  6. Android 程序调试技巧汇总

    1.Android Studio 引入一个项目作为library https://www.cnblogs.com/lixiangyang521/p/7453322.html 2.Android Stu ...

  7. Axure8.0

    1.Axure的一行三列的基本布局. 2.自适应页面设置,页面设置? 3.自动生成HTML的工具栏使用.生产的目录文件夹的内容. 4.元件的交互(样式修改,显示隐藏) 5.全局变量,钢笔工具的使用

  8. Jsch初步

    [From] http://xpenxpen.iteye.com/blog/2061869 上一篇文章我们成功搭建了sshd服务器,并通过3种方式登陆上了ssh.这一篇我们将用开源jar包jsch来登 ...

  9. scrapy模块之分页处理,post请求,cookies处理,请求传参

    一.scrapy分页处理 1.分页处理 如上篇博客,初步使用了scrapy框架了,但是只能爬取一页,或者手动的把要爬取的网址手动添加到start_url中,太麻烦接下来介绍该如何去处理分页,手动发起分 ...

  10. 用jenkins编译WPF程序并传输到服务器

    环境准备: 1.ide   visual studio2017 Enterprise,Ide可以https://visualstudio.microsoft.com/zh-hans/downloads ...