jquery ajax因异步设置不当导致页面局部内容(load())刷新不显示的问题总结

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%" οnlοad="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的设置上！

以后得注意这个属性的设置。