jQuery Ajax(异步改同步)
在实际使用中,我们经常会用的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(异步改同步)的更多相关文章
- jquery ajax异步和同步从后天取值
最近使用jquery的ajax,发现有些效果不对,ajax请求后返回的json串回来了,但是执行顺序有问题. var isReload = false; $.post('/home/DetectCac ...
- 使用 jQuery Ajax 异步登录,并验证用户输入信息(maven)
使用 jQuery Ajax 异步登录,并验证用户输入信息(maven) 本篇内容: (1)上一篇是使用同步的请求实现登录,并由 Servlet 决定登陆后下一步做哪些事情,本篇使用 jQuery A ...
- Jquery Ajax 异步设置Table中某列的值
可根据table中某列中的ID去改变某列的值! 只是参考,实际应用中不能这样做的,如果有很多行,频繁访问服务器,服务器是顶不住的! JS: $(document).ready(function () ...
- jquery ajax属性async(同步异步)示例
在jquery的ajax中如果我们希望实现同步或者异步我们可以直接设置async发生为真或假即可true false,下面举几个jquery ajax同步和异步实例 例1.jquery+ajax/&q ...
- JQuery $.ajax(); 异步访问完整参数
$.ajax 完整参数 jquery中的ajax方法参数 url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post ...
- jquery Ajax异步请求之session
写了一个脚本,如下: $(function () { $("#btnVcode").click(function () { var receiveMobile = $(" ...
- jQuery Ajax(异步请求)
jQuery异步请求 原始的异步请求是需要创建的 XMLHttpRequest 对象.(IE5,6不支持)目前很多浏览器都支持XMLHttpRequest对象 jQuery ajax常用的回调函数:b ...
- jquery ajax异步调用
写程序的第一步都要知其然,至于知其所以然就要看个人的爱好了.下面说一下web开发中经常用的ajax. 这里是用的jquery框架实现的ajax异步调用.废话少说先上代码.(asp.net开发) var ...
- jquery.ajax异步发送请求的简单测试
使用ajax异步发送请求到一般处理程序,判断输入的用户名和密码 1.添加Html页面,导入jquery 2.编写js代码和页面标签 <script type="text/javascr ...
随机推荐
- 在 MVC 中使用 ninject Lazy Load的一个想法
这这里先声明一下,引用了一个 (http://www.edcourtenay.co.uk/musings-of-an-idiot/2012/11/23/lazy-binding-with-ninjec ...
- JAVA Web从前端到后台常用框架介绍
原博客:https://blog.csdn.net/u013142781/article/details/50922010 一.SpringMVC http://blog.csdn.net/evank ...
- MacOs桌面自动被打乱的原因
1 系统设置--Mission Control -- 自动根据最近使用情况排序的勾勾去掉
- python学习,day2:列表的复制
主要涉及列表的潜复制(第二层受后面修改的影响)和深复制(不受后面修改的影响) 代码如下 # coding=utf-8 # Author: RyAn Bi import copy names = ['A ...
- C++_类和动态内存分配5-使用指向对象的指针
再探new和delete new为创建的每一个对象的名称字符串分配存储空间,这是在构造函数中进行的: 析构函数使用delete来释放这些内存. 字符串是一个字符数组,所以析构函数使用的是带中括号的de ...
- P1613 跑路
Luogu1613 #include<bits/stdc++.h> using namespace std; const int N=65; bool G[N][N][N]; int di ...
- json语法和使用
一.JSON 概述: JavaScript Object Natation,是一种轻量级的数据交换技术规范. 二.使用流程: 在服务端将java对象转换为JSON,然后发送到浏览器,在浏览器上在讲JS ...
- 洛谷 P2482 loj #2885 [SDOI2010]猪国杀 题解【模拟】【贪心】【搜索】
好玩的模拟题. 以后要经常写模拟题鸭 题目描述 游戏背景 <猪国杀>是一种多猪牌类回合制游戏,一共有\(3\)种角色:主猪,忠猪,反猪.每局游戏主猪有且只有\(1\)只,忠猪和反猪可以有多 ...
- 组合数取模介绍----Lucas定理介绍
转载https://www.cnblogs.com/fzl194/p/9095177.html 组合数取模方法总结(Lucas定理介绍) 1.当n,m都很小的时候可以利用杨辉三角直接求. C(n,m) ...
- U盘安装CentOS 7错误 /dev/root does not exist, could not
问题: U盘安装CentOS 7,显示/dev/root does not exist, could not boot 解决方法: 1. 到windows里面查看U盘名称(例如 "Cento ...