今天在做项目中遇到一个问题,大概是在一个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. 我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3cp8ng15g94wc

    我的博客即将同步至腾讯云+社区,邀请大家一同入驻:https://cloud.tencent.com/developer/support-plan?invite_code=3cp8ng15g94wc

  2. Helm 3 使用 harbor 作为仓库存储 charts

    简介 本文讲述的是调教 Helm 3 和 harbor 1.6+ 的经验,从 helm2 更新到 helm 3 并且将 charts 推送到 harbor 中进行存储,移除了原先的 helm serv ...

  3. Linux学习(一)--VMware下Linux安装和配置

    本片随便将给大家讲述linux在VM虚拟机上安装及终端的安装和配置 一.Linux介绍 Linux是一套免费使用和自由传播的类Unix操作系统,是一个基于POSIX和UNIX的多用户.多任务.支持多线 ...

  4. to_string()函数(C++)

    to_string函数,这是C++11新增的,使用非常方便,简单查了下:C++11标准增加了全局函数std::to_string 函数原型:string to_string (int val);str ...

  5. 2019全国大学生信息安全与对抗技术竞赛全国线下总决赛 Writeup

    0x00 Begin 关于 ISCC 2019 北理工总决赛,这一次比赛体验感总体差不多,最后我们战队荣获全国一等奖第一名,在这里非常感谢我的团队以及我的队友. 0x01 Reverse 下载题目:e ...

  6. 极简代码神器:Lombok使用教程

    Lombok 是一个非常神奇的 java 类库,会利用注解自动生成 java Bean 中烦人的 Getter.Setter,还能自动生成 logger.ToString.HashCode.Build ...

  7. centos6.5-7编译安装Ansible详细部署

    一.基础介绍==========================================================================================ansi ...

  8. window下不用安装虚拟机,也可以玩转linux,玩转最新redis

    想要了解redis的最新特性,可是windows下的可以安装的版本最高为3.2,想要验证redis的诸如stream特性的话,就无能为力了. 解决方法之一在windows上安装虚拟机,然后再虚拟机上安 ...

  9. Github上fork的项目如何merge原Git项目

    问题场景 小明在Github上fork了一个大佬的项目,并clone到本地开发一段时间,再提交merge request到原Git项目,过了段时间,原作者联系小明,扔给他下面这幅截图并告知合并处理冲突 ...

  10. Cell Phone Networ (树形dp-最小支配集)

    目录 Cell Phone Networ (树形dp-最小支配集) 题意 思路 题解 Cell Phone Networ (树形dp-最小支配集) Farmer John has decided to ...