$.getJSON的同步与异步请求

落花浮王杯 提交于 2020-01-02 23:24:53

  $.getJSON是jQuery请求get服务的一种方式,请求成功后返回json数据。

  请求格式为:$.getJSON(url,data,function(result){...});

  url:请求路径;

  data:请求参数;

  function函数:请求成功后执行的代码。

  *$.getJSON请求分异步同步两种方式,需要区分不同的使用场景!!!

1.$.getJSON异步请求(默认情况都是异步的):

 $.getJSON("http://localhost/WCFService/FOnwipRes.svc/GetDMDXDeviceList",
           {"OrgId":118},
            function(data){
               var data = eval("(" + data + ")");
               var DMDXData = eval("(" + data.Data + ")");
 )};

 但是,有时候这种方式并不可行~~

 例如,在点击事件中,点击触发后发送请求,再把返回的数据进行处理。会出现请求未响应完成,后面的代码已经在对请求结果进行处理,出现对象未定义的异常。

 代码演示:

 弹出框使用的是layer.js来实现

            //触发点击事件,弹出信息
            function getDMDXInfo(e) {
                var DMDXDataNew = ""; //json返回数据                var DMDX ="";  //需要弹出的内容                $.getJSON("http://weixin.liufeng.com.cn/MouldService/FOnwipRes.svc/GetMouldDMDXList",
                    {"OrgId":118},
                    function(data){
                        var data = eval("(" + data + ")");
                        DMDXDataNew = eval("("+data.Data+")");
                    });
                
                     //此处省略一万行(╯﹏╰)~~~~~~~~~~~~~~~~~~~~~                     //DMDXDataNew经过处理得到DMDX
                      if(DMDX == ""){
                            layer.alert('没有数据',{
                                title:DeviceName
                            });
                        }else{
                            layer.alert(DMDX,{
                                title:DeviceName
                            });
                        }
               }

我们现在浏览器中访问接口,结果是有返回数据的,如下图:

 

 

 

点击执行效果如下:

 

 

 接口明明是返回数据的,弹出框确提示没有,Why?

debug调试出现异常:data is not defined,这是因为ajax在请求服务还没有完成,又异步执行了下面的代码,而此时data还没有数据,故出现is not defined错误。

 

如何解决这种问题呢?我们只需要把异步请求改为同步请求~~

2.$getJSON同步请求

 代码演示:

            //触发点击事件,弹出信息
            function getDMDXInfo(e) {
                var DMDXDataNew = ""; //json返回数据                var DMDX = ""; //需要弹出的内容                $.ajaxSettings.async = false;  //设为同步请求
                $.getJSON("http://192.168.99.43/LFWcfService/FOnwipRes.svc/GetMouldDMDXList",
                    {"OrgId":118},
                    function(data){
                        var data = eval("(" + data + ")");
                        DMDXDataNew = eval("("+data.Data+")");
                    });
                $.ajaxSettings.async = true;  //设为异步请求
在ajax请求开始前将请求设为同步请求  $.ajaxSettings.async = false。在ajax请求结束后不要忘了将请求设备异步请求,否则其他的ajax请求也都变成了同步请求 $.ajaxSettings.async = true。

点击执行效果如下:

debug调试有数据:

 

 

 

 

 

 以上就是异步和同步ajax请求的区别,工作时需注意区分两种请求方式的使用场景。

 

 写在最后~~

 这是2020年的第一篇博客,现在2020.01.02  23:21,晚安~

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!