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%" 
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的设置上！

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