页面多个ajax顺序执行
需求背景
最近做项目,公司让前后端都给我做,之前接触前端少,于是在写ajax请求的时候,就遇到了一个问题:当我提交页面参数给后台的时候,由于页面是报表格式,一次性需要提交五张表给后台,后台会根据这五张表按照一定的算法进行计算,生成另外几张评估报表,但是后台怎样确定生成评估报表的时机呢?
解决方法思路
1. 把页面数据全部获取,使用一个ajax请求提交,后台写一个接口,接手全部数据,然后在对数据进行挑选归类,并根据算法生成评估报表,最后放入库表中.(不推荐这样,试想,要是页面上一次提交了好几百个字段,那后台去写这么大的一个字段接口接收这些字段,岂不是要疯了,后来维护人员肯定要不停地问候哦~,所以果断舍弃!)
2. 第一个ajax提交的回调函数之后,再进行第二个ajax调用,第二个ajax的回调函数之后,调用第三个ajax函数,依次类推,类似火车一样,车头后面挂着第一节车厢,第一节后面挂着第二节车厢....(不推荐这样,试想,如果中间某个函数发生了错误,程序就不会继续下去了,就像火车中一个车厢没挂住,着截车厢后面的所有车厢都会丢的,就算是不丢,后来的前端维护人员也会很鄙视这种写法的,所以果断舍弃!)
3. 第一个ajax提交函数正常执行,后续的ajax提交函数,一次加上延时操作,比如第二个ajax,延时100毫秒,第三个ajax延时200毫秒......这个想法还是挺不错的,留待验证.
4. ajax 函数的参数修改,请求加async: false,，这样所有的ajax就会同步执行，请求的顺序就是代码执行的顺序.这个想法也挺好的~
5. 使用$.when().done().fail()方法,方便快捷,极力推荐!
验证方法
ajax延时方法验证:
这个问题很让我困扰,于是按照java的思想,前台页面ajax提交数据,最后一个ajax提交数据的时候,我添加了一个延时操作如下:
setTimeout(
$.ajax({
url: url,
type: 'POST',
async: true,
timeout: 5000,
datatype: 'json',
data: data,
success: function(res){
//TODO
}
}), 100);
这样子,前一个ajax执行完以后,这个ajax方法,会延时100毫秒执行,依次类推.然后在最后一个ajax交互的后台接口里,进行评估表数据的运算和生成.然后我把项目打成jar包,扔到环境上去测试.
MySQL数据库环境:
没有问题,项目数据能够按照我设想的顺序运行.
Oracle数据库环境:
出现了空指针异常.出现原因分析:在后面的评估表数据运算过程中,需要查询前面ajax提交录入数据库的数据,没想到查到这条记录属于脏数据,导致在评估表取数据运算的时候,出现了空指针.经测验,Oracle数据库的写速度没有mysql的快,导致前条数据还没来得及写完,就去查询这条记录,出现了脏数据,真是罪过罪过,为了整体性,还得舍弃这个方法.
ajax同步方法验证:
这个前面说的也是很明了了,验证起来也是很方便,直接贴代码:
$.ajax({
url: url,
type: 'POST',
async: false,
timeout: 5000,
datatype: 'json',
data: data,
success: function(res){
//TODO
}
});
经过验证,这个还是很好使的,不过,这个ajax方法多了的情况下,页面会出现一定时间的等待期,所以会给用户带来不太好的体验,算是有一点点的小瑕疵,喜欢的同学斟酌一下,再使用.
$.when().done().fail()方法验证
整体上感觉这个方法是最好的,先贴代码:
$.when(
$.ajax({
url: url1,
type: 'POST',
async: true,
timeout: 5000,
datatype: 'json',
data: data1,
success: function(res){
//TODO
}
}),
$.ajax({
url: url2,
type: 'POST',
async: true,
timeout: 5000,
datatype: 'json',
data: data2,
success: function(res){
//TODO
}
})
).done(function(){
$.ajax({
url: url,
type: 'POST',
async: true,
timeout: 5000,
datatype: 'json',
data: data,
success: function(res){
//TODO
}
});
}).fail(function(){
alert("啊哦,出现问题了,请联系开发人员解决!");
});
这种好处自然而然的体现出来了,很方便,也很好阅读,是吧.另外,这个方法,还可以改写成下面的方式:
var ajax1 = $.ajax({
url: url1,
type: 'POST',
async: true,
timeout: 5000,
datatype: 'json',
data: data1,
success: function(res){
//TODO
}
});
var ajax2 = $.ajax({
url: url2,
type: 'POST',
async: true,
timeout: 5000,
datatype: 'json',
data: data2,
success: function(res){
//TODO
}
});
$.when(ajax1,ajax2).done(function(){
$.ajax({
url: url,
type: 'POST',
async: true,
timeout: 5000,
datatype: 'json',
data: data,
success: function(res){
//TODO
}
});
}).fail(function(){
alert("啊哦,出现问题了,请联系开发人员解决!");
});
不过这个方法,我没有测试,有兴趣的同学,可以自己试一下,要是有什么不准确的地方,还是大家多多斧正,谢谢!
参考
http://blog.csdn.net/fsdad/article/details/71514822
http://www.w3school.com.cn/jquery/ajax_ajax.asp
http://www.cnblogs.com/fjdingsd/p/5273008.html
