ajax回调函数执行顺序带来的同步异步问题

简介:

我们来看这样一段代码:

$(function(){

var a =0;

$.getJSON(

   "student_toadd",

    {stunum:10},

    function(json,status)
    {
           $.each(json,function(i){
                      $('#stuDiv').append("<div>学生学号:"+json[i].num+"</div>" );
            }

            ......................................... 

           a = 10;
        });

    }
)

alert(a);

});

你说说看弹出的a是多少?

我说:有可能是10,有可能是0。

因为ajax的执行是异步的,有可能回调函数还没有拿到返回值,就弹出a了。

 

解决办法

var a = 0;

$.ajax({
          type: 
"get",

         dataType: "json",

        async: false    // 异步为false

         url: "student_toadd",

         data:{stunum:10},

         success:function(json,status)
                        {
                                  $.each(json,function(i){
                                          $('#stuDiv').append("<div>学生学号:"+json[i].num+"</div>" );
                                   }

                                  ......................................... 

                                  a = 10;
                        );
 });

alert(a);   

这表示将$.ajax拿到返回值后,在执行后面的js。这样a就是10了。这样有什么启发呢?比如我们需要等到返回值在页面绘制一些元素,如果是异步的话,有可能绘制出来的东西是空的。

本文转自IT徐胖子的专栏博客51CTO博客,原文链接http://blog.51cto.com/woshixy/951159如需转载请自行联系原作者


woshixuye111

相关文章
|
1月前
|
前端开发 JavaScript Java
使用Ajax进行异步交互:提升Java Web应用的用户体验
【4月更文挑战第3天】Ajax技术在Web开发中提升UX,通过与服务器异步交互实现页面局部更新,无需完整刷新。核心组件包括XMLHttpRequest、JavaScript、HTML/CSS及服务器端脚本。在Java Web应用中,可使用原生JavaScript或框架如jQuery、AngularJS实现Ajax请求。Ajax减少页面刷新,实现实时数据更新,即时表单验证和动态UI,显著改善用户体验,是现代Web开发不可或缺的一部分。
|
1月前
|
前端开发 JavaScript API
Ajax技术的秘密揭秘:异步传输,高效交互
Ajax技术的秘密揭秘:异步传输,高效交互
|
9月前
|
JSON 前端开发 数据格式
Ajax无法访问回调函数seccess问题
1,后台返回的数据是标准json格式,前端dataType也是josn, 2,没有跨域访问,
33 0
Ajax无法访问回调函数seccess问题
|
13天前
1.ajax同步和异步区别 2.post和get区别
1.ajax同步和异步区别 2.post和get区别
11 0
|
1月前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
26 3
|
1月前
|
JSON 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
探秘 AJAX:让网页变得更智能的异步技术(下)
|
1月前
|
XML 前端开发 JavaScript
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
探秘 AJAX:让网页变得更智能的异步技术(上)
|
11月前
|
XML 前端开发 JavaScript
ajax 异步
Ajax(异步JavaScript和XML)是一种用于创建优雅的、可交互的Web内容的技术。它使用XMLHttpRequest对象作为后台与服务器端通信的桥梁,并使用JavaScript处理和展示从服务器端返回的数据。 Ajax可以使用户界面更加实时和响应迅速,因为它只需要通过JavaScript处理和展示从服务器端返回的部分数据,而无需重新加载整个页面。这也意味着,用户可以在不必等待整个页面重新加载的情况下,就可以获取和操作服务器端的数据。 Ajax的工作原理是,当用户触发某个操作时,JavaScript代码会向服务器发送一个HTTP请求,并在服务器端返回响应后,使用JavaScript处理
41 0
|
11月前
|
前端开发 JavaScript 关系型数据库
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
宝塔设置PHP定时任务实战记录(定时任务、ajax异步刷新API、shell脚本、访问url)
542 0
|
11月前
|
前端开发
ajax为多个操作指定回调函数$when.done.fail
ajax为多个操作指定回调函数$when.done.fail
38 0