jquery ajax因异步设置不当导致页面局部内容(load())刷新不显示的问题总结
需求背景
会议管理系统,页面布局为上左右标准布局,左侧为菜单列表。
开始进入系统时是列表信息,点击列表时,进入某个会议,同时刷新左侧的菜单,把左侧会议的功能列表菜单加载进来。
主页代码:
<div class="header">
<%@ include file="/pages/admin/pri/frames/topFrame.jsp" %>
</div>
<div class="main">
<div name="left_frame" id="left_frame" class="left_nav">
<%@ include file="/pages/admin/pri/frames/leftFrame.jsp" %>
</div>
<div class="pages">
<iframe src="${ctx}/pages/admin/pri/meeting/listMeeting.action" id="mainFrame" name="mainFrame" width="100%"
onload="Javascript:SetCwinHeight(this.id)" marginwidth="0" height="100%"
marginheight="0" scrolling="auto" frameborder="0" hspace="0" vspace="0"></iframe>
</div>
</div>
原实现方式:
点击列表的编辑功能:
触发编辑事件:
function modify(mId){
window.location.href = "${ctx}/pages/admin/pri/meeting/getMeetingById.action? meeting="+ mId;
showEditMenu("${ctx}", mId);
}
每个子页面包含函数:
function showEditMenu(contentPath,meetingId){
$(window.parent.document).contents().find("#left_frame").load(contentPath+
"/admin/pri/basemenu/toManagerMeetingMenu.action",
{
"meetingId": meetingId
},
doCallBack
);
function doCallBack (response,status,xhr){
//alert(response);
}
}
出现的问题的现象:
在IE FIREFOX下显示正常。Chrome safari下怎么点也却显示不了左侧的会议菜单。
问题排查:
1.排查原因后,推测chrome,safari下dom对象解析不一致。排除不是
2.load方法自身或许有问题。重新用$.ajax方法来写,还是大多数时候显示不出来。
最后排查是因为modify方法同时触发了两个动作,而ajax默认设置是异步的,左侧页面就加载不出来了。
知道症结,问题迎刃而解了。两种改写实现方式:
第一种:维持原有代码不变,把ajax的异步设置全局修改为false(默认是true)
$.ajaxSetup({async: false});
第二种:用$ajax()方法重写原功能,把获取的返回结果用.html()方法设置进去即可。
参考代码:
$.ajax({
type: "get",
url: contentPath+"/admin/pri/basemenu/toManagerMeetingMenu.action?meetingId="+meetingId,
dataType: "html",//(可以不写,默认)
timeout: 300,
async : false,
beforeSend: function(XMLHttpRequest){
//alert(contentPath+"/admin/pri/basemenu/toManagerMeetingMenu.action?meetingId="+meetingId);
},
success: function(data, textStatus){
// alert(data);//data是一个字符串对象
$(window.parent.document).contents().find("#left_frame").html(data);
},
complete: function(XMLHttpRequest, textStatus){
},
error: function(){
//请求出错处理
alert("load menu error");
}
});
本来很诡异的问题就出在async : false的设置上!
以后得注意这个属性的设置。
分享到:
相关推荐
在实现点击左侧导航栏,右侧不刷新页面显示网页内容的方法有很多,可以通过ifram实现、可以使用div绑定a或者li的点击事件 阻止a的默认行为,用jQuery的load()可以来加载这个div,即将网页放入div中,当然也可以用...
1.Overview of jQuery 2.Installation and documentation 3.Quick summary of jQuery selectors ...5.Content-centric Ajax: the load function 6.Handling JSON data 7.Comparing Ajax support to other libraries
ajax是在当前页面提取某些数据并提交出去,并能接收返回来的数据,处理之后进而显示在当前页面(不刷新页面)。 【例子】==验证用户名是否重复== 使用Ajax的思路:在要刷新的页面中写js和Ajax代码,把数据提交给另...
jQuery.load(url,[data],[callback])通过Ajax异步请求加载服务器中的数据,并把数据放到指定元素中。 •url :请求服务器的地址 •data :可选项,请求时发送的数据 •callback :可选项,请求成功后的回调函数 ...
先来看一个Ajax例子 代码如下: <!DOCTYPE html> <html> <head lang=”en”> <meta charset=”UTF-8″> <title></title> </head> <body> <input type=”button...
其次详细讲解了jQuery的各种选择器、jQuery操作DOM的方法、jQuery中的事件与应用、jQuery中的动画和特效、Ajax在jQuery中的应用,以及各种常用的jQuery插件的使用方法和技巧,所有这些知识点都配有完整的示例(包括...
错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。 $.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中,您...
如果您的网站包含许多页面,并且您希望您的 jQuery 函数易于维护,那么请把您的 jQuery 函数放到独立的 .js 文件中。 当我们在教程中演示 jQuery 时,会将函数直接添加到 <head> 部分中。不过,把它们放到一个单独的...
load()方法实现Ajax功能 getJSON函数获取数据 getScript函数获取数据 get实现异步获取xml文档数据 $.get发送请求 $.post发送请求 serialize()序列化表单 $.ajax()方法发送请求 第7章 validate验证插件 form...
load()方法可以说是JQuery中最简单的AJAX方法,它用于获取目标服务器的响应并将结果显示到页面上。load方法就是Jquery对AJAX的包装。还可以使用$.post()和$.get()来实现post或get方式的AJAX调用,对于复杂的情况,...
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+)。jQuery使用户能更方便地处理...
具体到这个例子,我们希望button1和button2点击之后,用AJAX的方式取example.html的内容,然后动态更新页面的id=callbackdemo3的div HTML如下: 代码如下: ”callbackdemo1″> <button id=”button1″>ajax ...
// the options for this ajax request }cache(true) 数据类型: Boolean jQuery 1.2中新添加的参数, 如果设为false,则会强制浏览器不缓存请求的页面。 complete 数据类型: Function 当请求完成时...
Jquery核心之一 ajax: 1. load(url,[data],[callback])载入远程HTML文件代码并插入至DOM中 url(String):请求的HTML的URL地址。 Data(Map):(可选参数)发送至服务器的key/value数据。 Callback(callback):(可...
做前端开发的朋友对于ajax异步更新一定印象深刻,作为刚入坑的小白,今天就和大家一起聊聊关于ajax异步请求的那点事。既然是ajax就少不了jQuery的知识,推荐大家访问www.w3school.com学习,教程完善,适合初学者快速...
与普通的 Ajax 相比,使用 FormData 的最大优点就是我们可以异步上传二进制文件。 jQuery 2.0+的版本支持FormData 方法一:使用<form>表单初始化FormData对象方式上传文件 •前端(JQuery): <form ...
6.1.2 jquery中的load()方法 6.1.3 jquery中的全局函数getjson() 6.1.4 jquery中的全局函数getscript() 6.1.5 jquery中异步加载xml文档 6.2 请求服务器数据 6.2.1 $.get()请求数据 6.2.2 $....
本文实例为大家分享了jquery实现异步文件上传的具体代码,供大家参考,具体内容如下 ajaxfileupload.js 异步上传文件: 直接引用。 调用方法: $.ajaxFileUpload({ url:'',//后台接口地址 type: post, secureuri...
平时用的比较多的JQuery图片上传插件是Uploadify这个插件,效果很不错,但是由于手机不支持flash,所以不得不再找一个文件上传插件来用了。后来发现ajaxFileUpload这个插件挺不错,所以就用这个插件来做异步上传文件...
ajaxFileUpload.js 很多同名的,因为做出来一个很容易。 ...AjaxFileUpload.js并不是一个很出名的插件...当初做了个异步上传的功能,选择它因为它的配置方式比较像jQuery的AJAX,我很喜欢。 评论里面说到的不行。那是因为