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

时间:2023-03-09 09:55:23
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))

  客户端要一直等到这个循环结束才有有输出,但是这个时候,浏览器并不会出现卡死情况。