今天想利用JQuery框架ajax写一个工具方法,参数分别为ajax请求发送的地址和参数。可以供应用程序的多个模块直接调用,当然了,需要有一个json格式的返回值。代码如下:
function getDate(uri,param){ var list; $.ajax({ type:"post",url:'listAllToJson_planTask',data:param,dataType:json,error:function(){ alert("获取数据失败"); },success:function(data){ list = eval('('+data+')'); //1 } }); if(list!=null){ alert(list.data); //2 return list.data; } }
var listDate = getDate("listAllToJson_planTask","");
alert("得到值"+listDate); //3
在IE运行后每次都发现运行次序是③→②→①,也就是说,在ajax得到值之前,方法已经返回一个空值(undefined)给调用的方法。在firefox运行也是如此。但使用firebug在①处断点调试等待几秒后向下运行,发现结果就是正常的运行顺序,也就是①→②→③。由此可以推断ajax运行的方式是异步运行,也就是说在ajax请求数据的同时,ajax代码外的代码依然继续运行。这是一个很好的机制,可以防止请求时间过长带来的屏幕死锁等问题。但在此例中需要利用到ajax的返回值的时候就不能得到正确的结果了。
上网搜了一下解决方法,大致有两种。
第一种:取消异步机制。
①加入async:false参数(在默认情况下async参数的值为true)
function getDate(uri,async:false,success:function(data){ list = eval('('+data+')'); } }); if(list!=null){ alert(list.data); return list.data; } }
这样就可以正常返回值了。
②设置ajax的全局属性
$.ajaxSetup({ async: false });第二种:在此方法的参数中加入一个回调函数
function getDate(uri,param,function1){ var list; $.ajax({ type:"post",// async:false,success:function(data){ list = eval('('+data+')'); function1(list); } }); // if(list!=null){ // alert(list.data); // return list.data; // } }
var listDate = getDate("listAllToJson_planTask","",function(list){ alert("回调函数"+list); });
虽然在ajax代码外部执行时异步方式,但是在ajax的success回调函数内部,执行的方式仍然是按顺序执行。此方式没有返回值,而是在利用ajax得到数据以后去执行传入的回调函数从而达到想要的结果。当然了这里的listDate仍然是undefined,但这已经不是我们需要的了。
在大多不严格要求顺序的情况下建议首选第二种方案,这样代码紧凑一些,而且没有违反ajax异步提交的初衷。
本人菜鸟,如果有遗漏的地方请留言告知,谢谢。
原文链接:https://www.f2er.com/ajax/166868.html