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
通过这几种方法就能完美解决问题了。
JavaScript中一个方法同时发送两个ajax请求问题的更多相关文章
- JavaScript中的方法、方法引用和参数
首先,我们来看一段代码,如果觉得不甚明白的,则本文会对你有益: var player = function (e) { return (function f(m) { ...
- 详解 JavaScript 中 splice() 方法
splice() 方法是一个比较少用的方法,但是功能确实很好,并且在我们 coding 的时候,经常有需要 splice() 方法,先介绍一下该方法. 在 JavaScript 中 splice() ...
- JavaScript中的方法
JavaScript中的方法 在JavaScript中,可以通过对象来调用对应的方法.在JavaScript中,有三个重要的window对象方法:用于显示警告信息的alert.用于显示确认信息的con ...
- JavaScript中reduce()方法
原文 http://aotu.io/notes/2016/04/15/2016-04-14-js-reduce/ JavaScript中reduce()方法不完全指南 reduce() 方法接收 ...
- JavaScript中Array方法总览
title: JavaScript中Array方法总览 toc: true date: 2018-10-13 12:48:14 push(x) 将x添加到数组最后,可添加多个值,返回数组长度.改变原数 ...
- 【mybatis】service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据【事务的问题】
问题描述: service层中一个方法中使用mybatis进行数据库的 多个修改操作,可能是update也可能是delete操作,但是sql语句命名执行并且在控制台打印出来了,但是数据库中未更新到数据 ...
- 根据JavaScript中原生的XMLHttpRequest实现jQuery的Ajax
基本介绍 XmlHttpRequest XmlHttpRequest是JavaScript中原生的,历史悠久的一种发送网络请求的方案. 基本上所有前端框架对于网络请求的部分都是基于它来完成的. 在本章 ...
- JavaScript 中string方法
注意:JavaScript的字符串是不可变的(immutable),String类定义的方法不能改变原来字符串内容,例如String.toUpperCase()这样的方法,返回的是全新的字符串,而不是 ...
- JavaScript中的方法重载
对js有些了解的人都知道,在js中根本就不存在像C#中的那种方法重载,而有的只是方法的覆盖,当你在js中敲入两个或多个同名的方法的时候,不管方法(函数)的参数个数怎么个不同,这个方法名只能属于最后定义 ...
随机推荐
- SVG波浪动画
今天来试试用svg+css3制作波浪动画 下图是我制作出的效果 还不错吧 在制作波浪前,首先我们要画波浪啊,至于画波浪,如果你想直接通过计算贝塞尔曲线绘制出波浪... 好吧,那我也不拦着你 我就直接用 ...
- Python连载25-函数tell&write&writeline$&持久化
一. 1.连续打印举例 #打开文件,三个字符一组读出来内容,然后显示在屏幕上,每读一次,停一秒 import time with open(r"test01.txt",'r') a ...
- 【MySQL】(三)文件
本篇文章分析构成MySQL数据库和InnoDB存储引擎表的各种累类型文件.这些文件有以下这些. 参数文件:告诉MySQL实例启动时在哪里可以找到数据库文件,并且指定某些初始化参数,这些参数定义了某种内 ...
- Spring还可以这样用缓存,你知道吗?
大家在项目开发过程中,或多或少都用过缓存,为了减少数据库的压力,把数据放在缓存当中,当访问的请求过来时,直接从缓存读取.缓存一般都是基于内存的,读取速度比较快,市面上比较常见的缓存有:memcache ...
- 从国际象棋与象棋的走法差异,再趣说IT人提升能力和增收方式
之前我写过篇博文,用象棋的思维趣说IT人的职业发展和钱途,发现象棋中的一些思维能应用到我们程序员平时的职业发展中. 当从大学毕业的程序员干个五六年以后,也达到了高级开发的水平,工作环境应该能摆脱动荡, ...
- eval 与 exec, compile区别
exec 不是表达式: python 2. x, 中的一个语句和 python 3. x. 中的一个函数它编译并立即计算一个字符串中包含的语句或者语句集. 例如: exec('print(5)') # ...
- 必懂的webpack高级配置
webpack高级配置 1.HTML中img标签的图片资源处理 使用时.只需要在html中正常引用图片即可.webpack就会找到对应的资源进行打包.并修改html中的引用路径 主要是将html中的i ...
- TCP三次握手抓包理解
TCP建立连接需要三次握手,分手需要四次握手,平时在网上看到很多次,但是还没有很理解.为什么分手要多一次?可能是刚开始追求女生的时候比较容易,到分手的时候就比较麻烦了吧... 了解某个东西要从它的基础 ...
- handlerAdapter与方法返回值的处理
前提:处理器方法被调用并返回了结果 public void invokeAndHandle(ServletWebRequest webRequest, ModelAndViewContainer ma ...
- codeforces 340 A. The Wall
水水的一道题,只需要找xy的最小公倍数,然后找a b区间有多少个可以被xy的最小公倍数整除的数,就是答案. //============================================ ...