码迷,mamicode.com
首页 > Web开发 > 详细

jquery 中多个存在依赖关系的ajax调用解决办法

时间:2015-08-11 07:11:56      阅读:128      评论:0      收藏:0      [点我收藏+]

标签:

  在使用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调用解决办法

标签:

原文地址:http://www.cnblogs.com/fireflow/p/4719751.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!