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

人多不足以依赖,要生存只有靠自己。 深窥自己的心,而后发觉一切的奇迹在你自己。 凡事皆有终结,因此,耐心是赢得成功的一种手段。

JavaScript中一个方法同时发送两个ajax请求问题的更多相关文章

  1. JavaScript中的方法、方法引用和参数

    首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益: var player = function (e) {             return (function f(m) {      ...

  2. 详解 JavaScript 中 splice() 方法

    splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() ...

  3. JavaScript中的方法

    JavaScript中的方法 在JavaScript中,可以通过对象来调用对应的方法.在JavaScript中,有三个重要的window对象方法:用于显示警告信息的alert.用于显示确认信息的con ...

  4. JavaScript中reduce()方法

    原文  http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/   JavaScript中reduce()方法不完全指南 reduce() 方法接收 ...

  5. JavaScript中Array方法总览

    title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...

  6. 【mybatis】service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据【事务的问题】

    问题描述: service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据 ...

  7. 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax

    基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...

  8. JavaScript 中string方法

    注意:JavaScript的字符串是不可变的(immutable),String类定义的方法不能改变原来字符串内容,例如String.toUpperCase()这样的方法,返回的是全新的字符串,而不是 ...

  9. JavaScript中的方法重载

    对js有些了解的人都知道,在js中根本就不存在像C#中的那种方法重载,而有的只是方法的覆盖,当你在js中敲入两个或多个同名的方法的时候,不管方法(函数)的参数个数怎么个不同,这个方法名只能属于最后定义 ...

随机推荐

  1. 判断list集合不为空

    在java开发中新手容易将判断一个list集合是否为空,只以If(list!=null)去判断,且容易和isEmpty()混淆,但是,list集合为空还是为null,是有区别的. 先看一下下面的例子, ...

  2. python 中多个装饰器的执行顺序

    python 中多个装饰器的执行顺序: def wrapper1(f1): print('in wrapper1') def inner1(*args,**kwargs): print('in inn ...

  3. C#中使用split分割字符串的方法小结

    string s=abcdeabcdeabcde; string[] sArray=s.Split(c) ; foreach(string i in sArray) Console.WriteLine ...

  4. GitLab-CI 来自动创建 Docker 镜像

    1.what is gitlab-ci docker image CI/CD 自动化集成,自动化部署.简单的说就是把代码提交到gitlab管理的同时部署到指定的server,打成docker imag ...

  5. javaScript常用运算符和操作符总结

    javaScript常用运算符和操作符总结 类别 操作符 算术操作符 +. –. *. /. %(取模) 字符串操作符 + 字符串连接   +=字符串连接复合 布尔操作符 !. &&. ...

  6. Calico 网络通信原理揭秘

    Calico 是一个纯三层的数据中心网络方案,而且无缝集成像 OpenStack 这种 Iaas 云架构,能够提供可控的 VM.容器.裸机之间的 IP 通信.为什么说它是纯三层呢?因为所有的数据包都是 ...

  7. Zabbix在 windows下监控网卡

    1.zabbix自定义监控Windows服务器的原理 Zabbix为Windows服务器的监控提供了PerfCounter(性能计数器)这个功能.Zabbix客户端通过PerfCounter获取Win ...

  8. pytest

    pytest可以生成多种样式的结果:1.生成JunitXML格式测试报告:命令: --junitxml=path(相对路径)2.生成result log 格式的测试报告: 命令:--resultlog ...

  9. 总结Idea环境,吐血踩过的坑

    1)首先是JDK环境安装,这一步千万要出错,我就是配错了CLASSPATH导致了很诡异的问题.可能结果:就是RUN到tomcat不报错,但是有404错误. 2)然后是IDEA安装,这里要十分注意如果你 ...

  10. 3、K-近邻算法

    K最近邻(k-Nearest Neighbor,KNN)分类算法 1.定义:如果一个样本在特征空间中的k个最近似(即特征空间中最临近)的样本中大多数属于某一类别,则该样本也属于这个类别. 2.计算公式 ...