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

最新推荐文章于 2025-02-25 13:39:30 发布

guoxu775

最新推荐文章于 2025-02-25 13:39:30 发布

阅读量1.3w

点赞数 1

分类专栏：技术疑惑文章标签： ajax jquery xmlhttprequest function safari class

本文链接：https://blog.youkuaiyun.com/guoxu775/article/details/7528897

版权

技术疑惑专栏收录该内容

19 篇文章

订阅专栏

本文总结了在使用jQuery AJAX时，由于异步设置不当，造成页面局部内容通过load()方法刷新不显示的问题。在IE和Firefox中正常，但在Chrome和Safari中出现问题。经过排查，发现是由于AJAX的异步特性导致，通过设置全局AJAX异步为false或改写AJAX方法解决了问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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