• $.getJSON的同步与异步请求


      $.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://localhost/WCFService/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://localhost/WCFService/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,祝大家新年快乐~~新的一年里遇见更好的自己! 晚安~

  • 相关阅读:
    C# 工厂
    sql server 数据库 数据DateTime 转mysql
    java 快捷工具,如何清理不需要的引用
    动态调用webservice 接口
    动态调用wcf接口服务
    下载图片出现问题
    jQuery Validation Engine 表单验证
    mvc5 知识点01
    mvc5 @RenderSection("scripts", required: false) 什么意思
    mvc5 _ViewStart.cshtml 模板页如何定义
  • 原文地址:https://www.cnblogs.com/qianlang/p/12142760.html
Copyright © 2020-2023  润新知