一、问题分析

对于后台系统，和大家相比，我印象深刻，知道布局结构，如图：

在这个布局中，我们需要将页眉、侧边栏和页脚分开，中间部分的内容需要动态改变，即根据不同的菜单定位不同的页面，整体布局不会改变

这种布局结构不具备简单HTML嵌入内容各部分的能力，需要我们自己去发现或者解决这个问题。因为jquery有很好的兼容性和使用广度，这里，

使用jquery的load方法来处理这个页面布局框架。

二、荷载方法的详细说明

1.定义

$(选择器)。加载(网址、数据、回调)；

所需的网址参数指定要加载的网址。

可选数据参数指定随请求发送的查询字符串键/值对的集合。

可选回调参数是load()方法完成后执行的函数的名称。

2.例子

您还可以向URL参数添加一个jQuery选择器。

以下示例将“demo_test.txt”文件中id为“p1”的元素的内容加载到指定的div元素中：

$('#div1 ')。load(' demo _ test . txt # P1 ')；

可选的回调参数指定load()方法完成后允许的回调函数。回调函数可以设置不同的

$ ('# div1 ')。加载(' demo _ test.txt '，函数(responsetxt，statusxt，xhr){ if(statusxt==' success ')警报('外部内容加载成功！');if(statusxt==' error ')警报(' error : ' xhr . status ' : ' xhr . statustext)；});三、利用布局框架加载

1.问题

网上很多人在使用load方法加载动态页面时都会遇到一个常见的问题，那就是加载页面中的JavaScript代码无效。这是因为load加载的外部文件会删除Script部分，所以在加载的页面中调用页面的JavaScript时，xxxfunction是未定义的。

2.解决

对于只包含静态HTML代码的页眉、侧边栏和页脚，直接加载

一般中间内容变化对应的内容都包含对应的JavaScript代码。使用jquery.load()方法时，使用用户自定义的load方法(以下代码)加载相应的内容，使用load的回调方法处理JavaScript的加载。将加载页面的JavaScript代码加载到布局页面的div id='content'/div中，这样每次加载()都会覆盖内容的内容，不用担心重复加载。这样就完美地解决了加载页面的js失效问题。具体代码如下：

第四，代码示例

布局页面：

！DOCTYPE html html头元字符集=' utf-8 '元http-equiv=' X-UA-Compatible '内容='IE=edge '标题/标题！-告诉浏览器响应屏幕宽度-元内容='宽度=设备宽度，初始比例=1,最大比例=1,用户可缩放=无'名称='视口！- Bootstrap 3.3.6 - link rel='样式表href='./resources/bootstrap/CSS/bootstrap。量滴CSS ' rel='外部无跟随'/头体类='保持-过渡皮肤-蓝色-浅侧边栏-mini ' onload=' onload()；'div class=' wrapper ' div id=' header '/div！-左侧栏。包含徽标和侧栏- div id='侧栏/div！-内容包装器。包含页面内容-div id=' content ' class=' content-wrapper clear fix '！-内容标题（页面标题)- /div！- /.content-wrapper-div id=' footer '/div！-添加侧边栏的背景。这个差异必须放在控制侧边栏-div class=' control-侧边栏-bg'/div /div之后！- ./wrapper -！- jQuery 2.2.3 -脚本src='http:/resources/plugins/jQuery/jQuery-2。2 .3 .量滴js /脚本！-自举3.3.6 -脚本src='http:/参考资料/bootstrap/js/bootstrap。量滴js '/脚本！-左侧菜单-脚本src='http:/resources/dist/js/common/global。js '/script脚本src=' http :/resources/dist/js/menu/MenuTemplate。js '/script脚本src=' http :/resources/dist/js/menu/menujs '/脚本/正文脚本/加载页面布局的页眉、侧边栏、页脚的内容$(“# header”).加载(' Inc/表头。html ')；$(' #侧边栏')。加载(' Inc/侧边栏。html ')；$(' #页脚').加载(' Inc/页脚。html ')；/* *加载变换内容，主要全球资源定位器(统一资源定位符)参数为数字正射影像图对象，并且该数字正射影像图中的全球资源定位器(统一资源定位符)放在href中， *调用方式如：span onclick=' JavaScript : load(this)；'href='/后台/网站/test。html ' rel='外部不跟随' rel='外部不跟随'测试/span *注意：1.该数字正射影像图对象最好不要用a标签，因为点击a标签会进入href指定的页面* 2.要加载的内容要用id='content '标注，因为负荷中指明了加载页面中指定的编号为内容下的内容* 3.对应页面的Java脚本语言写在内容下*/函数加载(网址，数据){ //alert($(url)).attr(' href ')；$.AJaxsetup({ cache : false })；$('#content ').加载($(网址)。attr('href') ' #content '，数据，函数（结果){ //alert(结果);//将被加载页的Java脚本语言加载到本页执行$result=$(结果);$result.find('脚本')。appendo(' # content ')；});}/脚本/html被加载页面：

div id='content' div测试二/div span onclick=' JavaScript : load(this)；'href='/后台/网站/test。html ' rel='外部不跟随' rel='外部不跟随'测试/span a href=' JAVAScript : test()；'rel='外部' nofollow '测试/a脚本函数测试(){ alert('测试二页面');}/脚本脚本函数test2(){ alert('史策');}/脚本/div效果截图：

以上所述是小编给大家介绍的使用jQuery的负荷方法设计动态加载及解决被加载页面射流研究…失效问题，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！