使用ajax得到返回值时执行顺序问题

发布时间：2020-12-15 21:05:24 所属栏目：百科来源：网络整理

导读：今天想利用JQuery框架ajax写一个工具方法，参数分别为ajax请求发送的地址和参数。可以供应用程序的多个模块直接调用，当然了，需要有一个json格式的返回值。代码如下： function getDate(uri,param){var list;$.ajax({type:"post",url:'listAllToJson_planTa

今天想利用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异步提交的初衷。

本人菜鸟，如果有遗漏的地方请留言告知，谢谢。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!