jQuery中带有异步Ajax代码的执行顺序

1、问题

​ 在使用jQuery的时候想通过Ajax请求来放所需要的html代码中放值,但是请求回来却是空的,源代码如下:

$("a").click(function() {
    //alert("in click");
    var table = $("
");//定义jQuery变量 var ths = $(" id email "); var trs = ""; $.getJSON("emps", null, function(resultJson) { for (var i = 0; i < resultJson.length; i++) { trs += " " + resultJson[i].id + "" + resultJson[i].email + ""; } }); table.append(ths);//加入表头 alert(trs); table.append(trs);//加入数据 $("div").append(table);//加入table到div中 return false; });

此时打印出来trs为空,结果很是尴尬。

2、解决方法:

经过仔细排查发现,在getJSON方法中又alert了一下,发现在getJSON中十分正常,这就很奇怪,不过我注意到了他们打印的先后顺序,先打印出来空的,再打印出来有值的,这也就说明了它们的先后顺序,先执行普通代码, 再执行异步请求代码,所以在放置数据的时候放在获取到数据的后一步,也就是放到getJSON方法中,改成下面代码即可:
jQuery中带有异步Ajax代码的执行顺序_第1张图片

此时可以alert出来,结果也是对的:

jQuery中带有异步Ajax代码的执行顺序_第2张图片

3、总结

​ 在jQuery代码中,先执行普通的代码,再执行异步执行代码,所以在赋值的时候,别忘记在最终的一步进行赋值,要不然会是个空值。这是我踩的一个大坑,我哭了。。。

我是福尔斯甘,如果对本篇有疑问,或者发现有什么错误之处,欢迎提出指出,觉得评论不方便的话,本人邮箱是[email protected],qq同号,欢迎共同学习讨论问题,
谢谢大家支持~~

你可能感兴趣的:(jQuery中带有异步Ajax代码的执行顺序)