在实际使用中,我们经常会用的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. Azure ASM虚拟机部署反恶意软件-安全扩展

    Azure虚拟机,默认情况下没有安装杀毒软件.如果您有此需求可以通过Azure 扩展进行安装,有关Azure反恶意软件的官方说明请参考:https://docs.azure.cn/zh-cn/secu ...

  2. springboot访问静态资源遇到的坑

    开始是以这种结构进行的,结果页面上一篇红,访问的页面是这样的 最终找出来问题,虽然每次调整路径都不对,最终查看多种方法可以看到了: 增加: package com.example.demo.confi ...

  3. python基础02—运算符与流程控制

    运算符与流程控制 运算符 赋值运算 用'='表示,'='的左边只能是变量 算术运算 +.-.*:加.减.乘 /:除法运算,运算结果为浮点数 //:除法运算,运算结果为整数(商) %:求余 **:求幂 ...

  4. Spring Eureka的使用入门

    Eureka调度服务: Gradle依赖包: 基础框架依赖配置核心代码: buildscript { repositories { mavenCentral() } dependencies {cla ...

  5. 24个常用 Python 实现

    24个常用 Python 实现 1.冒泡排序 lis = [56,12,1,8,354,10,100,34,56,7,23,456,234,-58] def sortport(): for i in ...

  6. Kibana6.x.x源码分析--Error: $injector:nomod Module Unavailable

    首先我的依赖注入写法如下: 由于是新手,比对着Kinaba中已有的插件,进行摸索开发,但运行代码后,发现在注册依赖的时候报错了.如下截图所示: 然后根据提示:http://errors.angular ...

  7. Luogu P1108 低价购买 DP

    第一问求最长下降子序列,不提: 第二问:借鉴了最短路的方法??? 我们求出来了每个位置的最长下降子序列的长度,那么刻意这样这样转移 if f[i]==f[j]+1&&a[i]<a ...

  8. Flask之flask-script 指定端口

    简介 Flask-Scropt插件为在Flask里编写额外的脚本提供了支持.这包括运行一个开发服务器,一个定制的Python命令行,用于执行初始化数据库.定时任务和其他属于web应用之外的命令行任务的 ...

  9. Week 5: Object Oriented Programming 9. Classes and Inheritance Exercise: int set

    class intSet(object): """An intSet is a set of integers The value is represented by a ...

  10. Linux设备驱动开发基础--内核定时器

    1. Linux内核定时器是内核用来控制在未来某个时间点(基于jiffies)调度执行某个函数的一种机制,其实现位于 <Linux/timer.h> 和 kernel/timer.c 文件 ...