在使用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调用解决办法的更多相关文章

  1. es6 Object.assign ECMAScript 6 笔记（六） ECMAScript 6 笔记（一） react入门——慕课网笔记 jquery中动态新增的元素节点无法触发事件解决办法 响应式图像 弹窗细节 微信浏览器——返回操作 Float 的那些事 Flex布局 HTML5 data-* 自定义属性 参数传递的四种形式

    es6 Object.assign   目录 一.基本用法 二.用途 1. 为对象添加属性 2. 为对象添加方法 3. 克隆对象 4. 合并多个对象 5. 为属性指定默认值 三.浏览器支持 ES6 O ...

  2. jquery中动态新增的元素节点无法触发事件解决办法

    在使用jquery中动态新增的元素节点时会发现添加的事件是无法触发的,我们下面就为各位来详细的介绍此问题的解决办法． 比如做一个ajax读取留言列表的时候,每条留言后面有个回复按钮,class为“re ...

  3. ajax和springmvc的请求响应原理——深入理解jQuery中$.get、$.post、$.getJSON和$.ajax的用法

    1,四大重要部分: 请求链接 post请求和get请求 请求参数形式 响应内容形式 2,从springmvc的controller角度,controller能接收到请求的前提 请求链接必须对应 pos ...

  4. RN 导入原有Xcode项目中，引入Pod依赖出现的问题与解决

    RN 导入原有Xcode项目中,引入Pod依赖出现的问题与解决 前言 最近学习React Native技术.将RN引入到原来Xcode项目中有一步:给原来Xcode项目添加所需要的Pod依赖 写好Po ...

  5. 简单理解jQuery中$.getJSON、$.get、$.post、$.ajax用法

    在WEB开发中异步请求方式普遍使用,ajax技术减少程序员的工作量,也提升用户交互体验.AJAX的四种异步请求方式都能实现基本需求,闲话不多说,直接切入正题. 1.$.getJSON $.getJSO ...

  6. jQuery绑定和解绑点击事件及重复绑定解决办法

    原文地址:http://www.111cn.net/wy/jquery/47597.htm 绑点击事件这个是jquery一个常用的功能,如click,unbind等等这些事件绑定事情,但还有很多朋友不 ...

  7. Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法

    Android中View类OnClickListener和DialogInterface类OnClickListener冲突解决办法 如下面所示,同时导入这两个,会提示其中一个与另一个产生冲突. 1i ...

  8. .NET在IE9中页面间URL传递中文变成乱码的解决办法

     在.Net的项目中,鼠标点击查询按钮,转到查询页面,但URL中包含中文时,传到服务器端后,中文变成了乱码(只有IE9出现该问题).       尝试使用Server.UrlEncode()进行编码, ...

  9. Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法

    Visual studio 2017中 Javascript对于Xrm对象模型没有智能提示的解决办法 先上个图.语法提示支持到 Microsoft Dynamics xRM API 8.2 也就是cr ...

随机推荐

  1. 深度探索QT窗口系统（五篇）

    窗口作为界面编程中最重要的部分,没有窗口就没有界面,是窗口让我们摆脱了DOS时代,按钮是一个窗口,文本框是一个窗口,标签页是一个窗口,...一个窗口可以由多个窗口组成,每天我们都在与窗口打交道,当你打 ...

  2. ThinkPad x200为何总是CPU占用50%

    2009年,我从美国买回一台ThinkPad X200 Tablet,Windows XP Tablet PC Edition 2005版,服役几年一直很正常.直到2012年初的时候,突然发现电脑非常 ...

  3. Thread’s start method and run method

    工作中用到了Thread,一开始用错了,仔细研究了一下,稍作整理. 前言,今天写代码居然这样写的 new Thread() { @Override public void run() { System ...

  4. 火狐浏览器开始支持3D游戏和视屏通话

    最近,Mozilla发布了第22版本的火狐浏览器,这个版本增加了对3D游戏.视频通话和文件分享功能的支持.现在使用者不必下载额外的插件或者第三方软件就可以使用上面的所有特性.为了鼓励更多的开发者为火狐 ...

  5. BZOJ 1016: [JSOI2008]最小生成树计数( kruskal + dfs )

    不同最小生成树中权值相同的边数量是一定的, 而且他们对连通性的贡献是一样的.对权值相同的边放在一起(至多10), 暴搜他们有多少种方案, 然后乘法原理. ----------------------- ...

  6. C++对象模型5--多继承下的对象模型

    C++对象模型中加入多继承 从单继承可以知道,派生类中只是扩充了基类的虚函数表.如果是多继承的话,又是如何扩充的? 1)        每个基类都有自己的虚表. 2)        子类的成员函数被放 ...

  7. centos6.5安装vsftpd

    开通FTP有gssftp和vsftpd二种,查了查,据说vsftpd更稳定和更安全.就用vsftpd吧. 什么是vsftpd vsftpd是一款在Linux发行版中最受推崇的FTP服务器程序.特点是小 ...

  8. 手机测试Android程序

    手机测试Android程序   上传者:sanpi329     我也要“分享赚钱” 2014/7/9 关注(23) 评论(0)   声明:此内容仅代表网友个人经验或观点,不代表本网站立场和观点.   ...

  9. php基础知识（有代码有注释）

    回顾 数组: 数据的组合 数组定义: 三种方式(常用array()) 数组访问: 下标 数组分类: 关联数组, 索引数组和混合数组 数组循环遍历: foreach遍历(foreach原理) 二维数组: ...

  10. 运用DIV拖拽实现resize和碰撞检测

    运用DIV拖拽实现resize和碰撞检测 Div由拖拽改变大小 演示demo 当我们运用html元素"textarea"写一个文本输入框时,浏览器会自动生成以下样式 用鼠标拖动右下 ...