zoukankan      html  css  js  c++  java
  • JavaScript中一个方法同时发送两个ajax请求问题

    今天在做项目中遇到一个问题,大概是在一个jsp页面同时有一个select下拉搜索条件框和一个Bootstrap表格展示列表。这两个都要通过ajax向后台拿数据,而且要在页面加载时完成。
    当时的做法是:

    复制代码
    $(function() {
        // 加载下拉菜单
        selectMenu();
    
        /** 加载页面表格 */
        var url = 'xxxx.do';
        var col = [ {
            checkbox : true
        }, {
            field : 'operlogid',
            title : 'xxx',
            formatter : function(value, row, index) {
                return index + 1;
            }
        }, {
            field : 'empuserid',
            title : 'xxx',
            sortable : true
        }, {
            field : 'makedate',
            title : 'xx',
            sortable : true
        }, {
            field : 'menuname',
            title : 'xx',
            sortable : true
        }, {
            field : 'designation',
            title : 'xx',
            sortable : true
        },
        // {field: 'content',title: 'xx'},
        {
            field : 'result',
            title : 'xx',
            sortable : true
        } ];
    
        // 初始化加载表格
        tableInit(url, $('#tb'), col);
    });
    
    /**
     * 加载菜单下拉
     */
    function selectMenu() {
    $.ajax({
            url : dataBase + "xxx.do",
            type : 'post',
            data : {},
            success : function(data) {
                // alert(JSON.stringify(data));
                var sel = '<option value="">请选择</option>';
                for ( var i in data) {
                    sel += '<option value="' + data[i].menuname + '">'
                            + data[i].menuname + '</option>';
                }
                $("#sel_menuname").html(sel);
            }
    
        });
    }
    复制代码

    这样做完导致的结果是:在谷歌浏览器页面正常显示,在火狐浏览器会不定期出现系统异常错误提示!
    最后分析原因是:
      从异步请求的执行原理来看,我们知道当一个异步请求发送时,浏览器不会处于锁死、等待的状态,从一个异步请求发送到获取响应结果的期间,浏览器还可以进行其它的操作。这就意味着多个异步请求的执行时并行的。
    两个ajax异步请求(Bootstrap表格在加载时也是ajx异步请求)冲突,因为异步问题,在onload方法中调用两个ajax异步,其实相当于同时发送两个请求。执行的快与慢,要看响应的数据量的大小及后台逻辑的复杂程度。selectMenu()请求的下拉列表数据没有展示出来,这说明Bootstrap的tableInit方法 对页面的操作快于selectMenu,所以导致页面出错。
    解决办法:
      当然针对这个问题而言还有很多解决办法,这里提供三种解决方案:
      (1)Ajax2()方法的执行放到Ajax1()的success回调函数的最后一行。
      (2)Ajax1()的异步请求方法中,增加一个回调函数 :complete : Ajax2
      (3)把Ajax1()的异步设为同步:async : false
    通过这几种方法就能完美解决问题了。

    人多不足以依赖,要生存只有靠自己。 深窥自己的心,而后发觉一切的奇迹在你自己。 凡事皆有终结,因此,耐心是赢得成功的一种手段。
  • 相关阅读:
    利用 ImageAI 在 COCO 上学习目标检测
    pip 安装包提速
    opencv 学习资料
    Win10 小技巧
    tqdm:Python 进度条
    自制 COCO api 直接读取类 COCO 的标注数据的压缩文件
    线性回归模型的 MXNet 与 TensorFlow 实现
    cv2 与 matplotlib 的 Bug 记录
    pyinstaller 打包错误集锦
    python函数的进阶
  • 原文地址:https://www.cnblogs.com/taiyanhong/p/7976219.html
Copyright © 2011-2022 走看看