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

前端之家收集整理的这篇文章主要介绍了使用ajax得到返回值时执行顺序问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

今天想利用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

猜你在找的Ajax相关文章