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中敲入两个或多个同名的方法的时候,不管方法(函数)的参数个数怎么个不同,这个方法名只能属于最后定义 ...
随机推荐
- jdk安装错误1316,jdk-10.0.1
打开注册表regedit ,定个位到 计算机\HKEY_LOCAL_MACHINE\SOFTWARE\JavaSoft\ 把jdk,jre下面的目录删掉.即10.0.1 ,问题解决 参考: https ...
- 个人永久性免费-Excel催化剂功能第36波-新增序列函数用于生成规律性的循环重复或间隔序列
啃过Excel函数的表哥表姐们,一定对函数的嵌套.数组公式等高级的应用有很深的体会,威力是大,但也烧死不少脑细胞,不少人就在这样的绕函数中光荣地牺牲了,走向从入门到放弃.Excel催化剂的创立,初衷就 ...
- 找bug的过程
关于昨天程序出差我找bug的过程记录 昨天才程序 https://www.cnblogs.com/pythonywy/p/11006273.html ├── xxxx │ ├── src.py │ └ ...
- vijos P1911 珠心算测验
#include<iostream> using namespace std; int main() { int n; int sum = 0; int num[200]; cin > ...
- [机器学习] kears入门:用单层网络实现玩具回归
learn from: 莫烦教keras的视频: https://morvanzhou.github.io/tutorials/machine-learning/keras/2-1-regressor ...
- solr配置分词器
一.solr4.10 + mmseg4j-2.2.0分词器 1.solr的安装部署:http://www.cnblogs.com/honger/p/5876289.html,注意不同的版本安装方式可能 ...
- Python—推导式
推导式 推导式:comprehensions(又称解析式),是Python的一种独有特性,相当于语法糖的存在,推导式是可以从一个数据序列构建另一个新的数据序列的结构体. 共有三种推导,在Python2 ...
- golang文档、中文、学习文档
Golang中文文档地址 http://zh-golang.appspot.com/doc/ Golang非英文文档地址: https://github.com/golang/go/wiki/NonE ...
- CSS3 filter 模糊滤镜的应用
CSS3 filter 模糊滤镜的应用 在segmentfault上回答过的一个问题,如何将网页CSS背景图高斯模糊且全屏显示当时没有深入了解,只觉得滤镜应该只是应用于图片上的.而且各大网站的de ...
- window下打jar包
比如我的项目在 F/Myjar F:\Myjar>ll'll' 不是内部或外部命令,也不是可运行的程序或批处理文件. F:\Myjar>cd mian系统找不到指定的路径. F:\Myja ...