jquery 中多个存在依赖关系的ajax调用解决办法
在使用ajax异步调用的时候,可能碰到同时调用多个ajax这种情况。而且多个ajax之间还存在依赖关系。这种情况怎么处理呢?
有两种办法:
一种是多个ajax嵌套调用,这时需要设置async为false,也就是便成同步的了,但是这种方法存在一个弊端,如果后台出现问题,一直忙,不能返回数据,浏览器将出现卡死的情况。
第二种方法是使用队列的方法。将ajax加入到队列中,然后依次调用即可。
这里举个例子。
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="/static/js/jquery-2.0.0.min.js"></script>
<script>
$(function () {
$("#ajax").click(function () {
var sum;
$("#ajax").queue("ajaxRequest", function () {
$.ajax({
url: "/web/add/",
type: 'get',
data: {a: 1, b: 2},
success: function (data) {
sum = data;
console.log("1+2=" + sum);
$("#ajax").dequeue("ajaxRequest");
}
});
});
$("#ajax").queue("ajaxRequest", function () {
$.ajax({
url: "/web/plus/",
type: 'get',
data: {a: sum},
success: function (data) {
console.log("3+5=" + data);
$("#ajax").dequeue("ajaxRequest");
}
});
});
$(this).dequeue("ajaxRequest");
});
}); </script>
</head>
<body>
<form action="">
姓名<input type="text"/>
</form>
<button id="ajax">ajax</button>
</body>
</html>
在上面的方法中使用了两个ajax,第二个ajax使用了第一个ajax回调函数获取到的数据。
后台采用django,相关代码如下。
urls.py设置
url(r'^$','index',name='index'),
url(r'^add/$','add',name='add'),
url(r'^plus/$','plus',name='plus'),
views.py设置
def index(request):
return render_to_response('index.html') def add(request):
a = request.GET['a']
b = request.GET['b']
a = int(a)
b = int(b)
return HttpResponse(str(a+b)) def plus(request):
a = request.GET['a']
return HttpResponse(str(int(a)+5))
这个时候,假如再在plus中添加下面代码:
def plus(request):
for i in range(1000000):
print i
a = request.GET['a']
return HttpResponse(str(int(a)+5))
客户端要一直等到这个循环结束才有有输出,但是这个时候,浏览器并不会出现卡死情况。
jquery 中多个存在依赖关系的ajax调用解决办法的更多相关文章
- es6 Object.assign ECMAScript 6 笔记(六) ECMAScript 6 笔记(一) react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式
es6 Object.assign 目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...
- jquery中动态新增的元素节点无法触发事件解决办法
在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法. 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...
- ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法
1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...
- RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决
RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决 前言 最近学习React Native技术.将RN引入到原来Xcode项目中有一步:给原来Xcode项目添加所需要的Pod依赖 写好Po ...
- 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法
在WEB开发中异步请求方式普遍使用,ajax技术减少程序员的工作量,也提升用户交互体验.AJAX的四种异步请求方式都能实现基本需求,闲话不多说,直接切入正题. 1.$.getJSON $.getJSO ...
- jQuery绑定和解绑点击事件及重复绑定解决办法
原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...
- Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法
Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法 如下面所示,同时导入这两个,会提示其中一个与另一个产生冲突. 1i ...
- .NET在IE9中页面间URL传递中文变成乱码的解决办法
在.Net的项目中,鼠标点击查询按钮,转到查询页面,但URL中包含中文时,传到服务器端后,中文变成了乱码(只有IE9出现该问题). 尝试使用Server.UrlEncode()进行编码, ...
- Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法
Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法 先上个图.语法提示支持到 Microsoft Dynamics xRM API 8.2 也就是cr ...
随机推荐
- Windows phone 8.1 MessageBox 变了哦!
using Windows.UI.Popups; public async void MessageBoxShow(string content, string caption) { MessageD ...
- Windows 7各版本的主要功能区别是什么 有何不同
Windows 7包含6个版本,分别为Windows 7 Starter(初级版).Windows 7 Home Basic(家庭普通版).Windows 7 Home Premium(家庭高级版). ...
- HDU 5782 Cycle(KMP+Hash)
[题目链接] http://acm.hdu.edu.cn/showproblem.php?pid=5782 [题目大意] 给出两个字符串,判断他们每一个前缀是否循环同构,循环同构的意思就是,字符串首位 ...
- 浅谈JSP(一)
一.JSP引言 JSP全名为Java Server Pages,中文名叫java服务器页面,其根本是一个简化的Servlet设计.它是在传统的网页HTML文件(*.htm,*.html)中插入Java ...
- Mybatis学习之JDBC缺陷
1.JDBC存在的问题 1.将sql语句硬编码到java代码中,如果修改sql语句,需要修改java代码,重新编译.系统可维护性不高. 设想如何解决?(将sql单独 配置在配置文件中) 2.数据库连接 ...
- 详解H3C交换机“端口安全”功能
以下内容摘自正在全面热销的最新网络设备图书“豪华四件套”之一——<H3C交换机配置与管理完全手册>(第二版)(其余三本分别是:<Cisco交换机配置与管理完全手册>(第二版). ...
- java和.net 处理任意格式日期字符串转日期类型,
1.SimpleDateFormat.parse 把指定格式字符串转日期类型 public static Calendar convToCalender(String str,String templ ...
- win7 64位 Xsheel
Xsheel5安装后,找不到.dll文件,系统支持不好,不用 Xshell4有时提示 1152:Error 就使用 链接:http://pan.baidu.com/s/1c1s42Y0 密码:098x ...
- python之math模块
1.math简介 >>>import math #导入math模块 >>>dir(math) #这句可查看所有函数名列表 >>>help(math ...
- 关于Python中的yield(转载)
您可能听说过,带有 yield 的函数在 Python 中被称之为 generator(生成器),何谓 generator ? 我们先抛开 generator,以一个常见的编程题目来展示 yield ...