在使用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))
客戶端要一直等到這個循環結束才有有輸出,但是這個時候,瀏覽器並不會出現卡死情況。