关于jQuery的load()方法

传统的网站页面包含多个header、footer、siderbar、tip(提示框/输入框)等多个公共组件，如果一味的复制粘贴，页面将会相当臃肿和难以维护。这里介绍jqurey的load(）方法。目的：实现页面的组件化，方便管理和维护。如果你是Vue和React用户，请无视此文。jquery load方法是jQuery.ajax()的一个方法，语法：$(selector).load(url,d..

dengjiecsdn

7159人浏览 · 2018-08-30 17:12:20

dengjiecsdn · 2018-08-30 17:12:20 发布

传统的网站页面包含多个header、footer、siderbar、tip(提示框/输入框)等多个公共组件，如果一味的复制粘贴，页面将会相当臃肿和难以维护。这里介绍jqurey的load(）方法。目的：实现页面的组件化，方便管理和维护。如果你是Vue和React用户，请无视此文。

jquery load方法是jQuery.ajax()的一个方法，语法：$(selector).load(url,data,function(response,status,xhr))

现在，我的index.html只有一些动态加载的组件：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <title></title>
   </head>
   <body>
       
       <div id="header"></div>
       
       <div class="main"></div>
       
       <div id="tip"></div>
       
       <div id="sideBar"></div>
       
       <div id="footer"></div>
   </body>
   <script>
       $('#header').load('header.html',function(responseTxt,statusTxt,xhr){
           if(statusTxt=='success'){
               console.log('头部加载成功!')
           }
       });
       //.........动态加载其他的组件
       $('#footer').load('footer.html',function(responseTxt,statusTxt,xhr){
           if(statusTxt=='success'){
               console.log('footer加载成功!')
           }
       });
   </script>

然后，我们来看看header.html

<div class="my_nav">
                   <ul class="nav navbar-nav">
                       <li class="active"><a href="index.html">首页</a></li>
                       <li><a href="#">产品</a></li>
                       <li><a href="index.html">解决方案</a></li>
                       <li><a href="aboutUs.html">关于我们</a></li>
                   </ul>
               </div>
               
               <script>
                   $(window).scroll(function(){
                       if($(window).scrollTop() > 100) {
                           $(".my_nav").addClass("active");
                       } else {
                           $(".my_nav").removeClass("active");
                       }
                   })
               </script>

注意，这里本人推荐只用html片段而非标准html格式

您会遇到的两个坑：

1.组件的js加载失败，在index.html中组件定义的方法和函数无效报错。如果你使用的标准html格式，可能遇到这个问题。

index.html界面最终其实是jq通过ajax请求过来内容，在append到目标区域。而通过ajax请求方法的responseText又只会抓去完整html片段中<body>里面的内容。标准格式正好把js写在了body外面所以导致js没执行。也就是说当load()这个老司机开车的时候，body的内容上车了，js却被留在了车外。当老司机到达index.html的时候，由于之前js定义的函数和方法没有上车,index页面的控制台只能帮你报警...

2.用jquery的load方法后：jQuery获取组件dom对象失败。

加载完毕后试试在index的script里操作下 $(".my_nav").html("设置内容失败！")

原因：只有在元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件，也就是执行在前，加载在后。

我的写法（不一定好用）：

$(function(){
               $('#header').load('header.html',function(responseTxt,statusTxt,xhr){
                   if(statusTxt=='success'){
                       var _li=$(".navbar-nav").find("li");//用变量保存多次调用的Dom对象,可以减少开销
                       _li.eq(0).removeClass("active")
                       _li.eq(3).addClass("active")
                       console.log('头部加载成功!')
                   }
               });
               $('#footer').load('footer.html',function(responseTxt,statusTxt,xhr){
                   if(statusTxt=='success'){
                       //加载完毕前要处理的事件
                       console.log('footer加载成功!')
                   }
               });
           })

在load方法的回调函数里面提前绑定dom。

原创不易，请轻喷，Vue、React组件化框架用户请无视，如有问题请回复我！

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^