wangshuaiandroid

今天在做项目中遇到一个问题,大概是在一个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
通过这几种方法就能完美解决问题了。

分类:

技术点:

相关文章:

  • 2022-12-23
  • 2021-08-27
  • 2022-12-23
  • 2022-01-13
  • 2021-11-17
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-11-29
  • 2022-12-23
  • 2022-12-23
  • 2021-07-15
  • 2022-12-23
相关资源
相似解决方案