Jquery load()方法加载html片段

最新推荐文章于 2021-06-21 10:13:12 发布
最新推荐文章于 2021-06-21 10:13:12 发布
阅读量1.3w 收藏 3
点赞数 2
CC 4.0 BY-SA版权
文章标签： html load方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/this_ITBoy/article/details/50906913
本文探讨在导航栏中实现点击切换不同内容区，并带有下拉分页异步刷新效果的问题。传统的ajax方法在切换导航时无法正确加载动态数据，但通过Jquery的load()方法，成功地加载了包括下拉分页在内的完整HTML片段，解决了这一问题。

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

在上一个案例中用的ajax加载html片段实现导航的切换，这次的这个案例用同样的方法却不是很好实现。

案例:在一个导航栏中，实现点击导航出现不同的选择区域，而且每个页面都有下拉分页异步刷新的效果。如图：

                

图1       图2

                 

图3 图4

上图中，图2和图4都有下拉分页异步刷新的效果，也就是只要有数据，我们可以一直下拉一直加载数据出来,在前面的《jquery.lazyload.min和jquery-jtemplates在Ajax加载页面的应用》这篇博客里面讲到了下拉分页异步刷新的实现方法。

如果我们这次还是使用ajax异步加载html片段的方法，会发现当我们切换导航的时候，图2上半部分可以加载出来，图4是图2下拉分页的下半部分却加载不出来而显示的是空白的，即使在图2的html片段里面引用了下拉分页的JS同样还是显示不出来。然后我觉得，可能是ajax异步加载html片段只能加载静态的数据而不好加载动态刷新的数据，不然也不是只加载出来了一部分。后来用了另外一种方法实现了html片段的加载。

主页面HTML的部分代码：

<body>
   <div class="teBuyNav">
      <ul>
         <li class="cur" onclick="temp(0);$(this).addClass('cur');">特卖</li>
         <li class="" onclick="temp(1);$(this).addClass('cur');">用品</li>
         <li class="" onclick="temp(2);$(this).addClass('cur');">玩具</li>
         <li class="" onclick="temp(3);$(this).addClass('cur');">居家</li>
         <li class="" onclick="temp(4);$(this).addClass('cur');">食品</li>
      </ul>
   </div>
    <div class="main" id="temp"> //需要替换的Div   
        <div class="promotion">
           <div class="flashBuy">
              <div class="box" onclick="window.location='teBuyList.html'"> 
                 <h3>限时秒杀</h3>
                 <p>多梅西宽口PP奶瓶</p>
                 <div class="price">
                    <h1><b>￥</b>88.8</h1>
                    <p>抢购中</p>
                 </div>
                 <div class="showTime"><span>距离结束</span><input type="text" id="time_h">:<input type="text" id="time_m">:<input type="text" id="time_s"></div>
                 <img src="../images/tebuy/ms.png" alt="" />
              </div>
           </div>
           <div class="marketing">
              <div class="w50" onclick="window.location='teBuyListTwo.html'">
                 <div class="box btLine">
                    <h3 style="color:#f18c1a">新品首发</h3>
                    <p>育儿推荐爆款</p>
                    <img src="../images/tebuy/p1.png" alt="" />
                 </div>
              </div>
              <div class="w50" onclick="window.location='teBuyListTwo.html'">
                 <div class="box btLine">
                    <h3 style="color:#ec6b42">最热门</h3>
                    <p>多款遥控卡通车</p>
                    <img src="../images/tebuy/p2.png" alt="" />
                 </div>
              </div>
              <div class="w50" onclick="window.location='teBuyListTwo.html'">
                 <div class="box">
                    <h3 style="color:#e95072">超值限量</h3>
                    <p>精品乳制品</p>
                    <img src="../images/tebuy/p3.png" alt="" />
                 </div>
              </div>
              <div class="w50" onclick="window.location='teBuyListTwo.html'">
                 <div class="box">
                    <h3 style="color:#4a64ae">海外优品</h3>
                    <p>营养又好吃</p>
                    <img src="../images/tebuy/p4.png" alt="" />
                 </div>
              </div>
           </div>          
           <br style="clear:both;" />
        </div>
    <!-- goodShow end -->
      <div class="swiper-pagination2"></div>
   </div>
    
   <div class="tebuyTit"><h1><span></span>精品特卖</h1></div>
   <p style="display:none">
   <textarea id="Template-Items" rows="0" cols="0" >
      <!--
	// jquery.lazyload.min和jquery-jtemplates里面的语法,实现图2的下拉分页
      {#foreach $T.Items as apple}
          <div class="saleBar">
            <div class="pic"><img class="lazy" src="{$T.apple.Img}" alt="" /></div>
            <div class="txt"><h2 class="nam">{$T.apple.Name}</h2> <span class="dat">剩<b>{$T.apple.days}</b>天</span><br style="clear:both;"></div>
         </div>
      {#/for}

   -->
      </textarea>
   </p>
      <!-- Output elements -->
      <div id="Items" class="Content">

      </div>

      <div class="loading"><img src="../images/preloader.gif" alt="" /></div>
    
   </div>
    <!--}}main--> 
</body>
 

JS代码如下：

<script>
function temp(a){
   if(a==0){
      $("#temp").load('tempIndex.html');
      $(".teBuyNav li").removeClass("cur");
      }
   if(a==1){
       $("#temp").load('tempClass.html');
       $(".teBuyNav li").removeClass("cur");
   }
    if(a==2){
        $("#temp").load('tempClass.html');
        $(".teBuyNav li").removeClass("cur");
    }
    if(a==3){
        $("#temp").load('tempClass.html');
        $(".teBuyNav li").removeClass("cur");
    }
    if(a==4){
        $("#temp").load('tempClass.html');
        $(".teBuyNav li").removeClass("cur");
    }
}
</script>

运用load()方法将id=temp的Div里面的内容换成html片段，即tempIndex.html和tempClass.html片段。


tempIndex.html代码如下：

<meta charset="utf-8">
<script>
$(function() {
   //set template and process
   $("#Items").setTemplateElement("Template-Items").processTemplateURL("index.json");
});
//next page load
$(function(){
   $(window).scroll(function(){
      // 当滚动到最底部以上100像素时， 加载新内容
      if ($(document).height() - $(this).scrollTop() - $(this).height()<10){
         loadMore();
      }

   });
});

$(function() {
   $("img").lazyload({
      placeholder : "../images/preloader.gif",
      event : "click"
   });
});

function loadMore(){
   $.ajax({
      type: "post",
      contentType: "application/json",
      url: "index.json",
      beforeSend: function () {
         $(".loading").show();
      },
      success: function (data) {
         $("#Items").append("<div class='more'></div>");
         var lastDiv = $(".more:last")//chose last div has class more
         $(lastDiv).setTemplateElement("Template-Items").processTemplateURL("index.json");
      },
      complete: function () {
         $(".loading").hide();
      },
      error: function (data) {
         console.info("error: " + data.responseText);
      }
   });
}

$(function() {
   $("img.lazy").lazyload({

      effect : "fadeIn"
   });
});
</script>
      <div class="promotion">           <div class="flashBuy">              <div class="box" onclick="window.location='teBuyList.html'">                  <h3>限时秒杀</h3>                 <p>多梅西宽口PP奶瓶</p>                 <div class="price">                    <h1><b>￥</b>88.8</h1>                    <p>抢购中</p>                 </div>                 <div class="showTime"><span>距离结束</span><input type="text" id="time_h">:<input type="text" id="time_m">:<input type="text" id="time_s"></div>                 <img src="../images/tebuy/ms.png" alt="" />              </div>           </div>           <div class="marketing">              <div class="w50" onclick="window.location='teBuyListTwo.html'">                 <div class="box btLine">                    <h3 style="color:#f18c1a">新品首发</h3>                    <p>育儿推荐爆款</p>                    <img src="../images/tebuy/p1.png" alt="" />                 </div>              </div>              <div class="w50" onclick="window.location='teBuyListTwo.html'">                 <div class="box btLine">                    <h3 style="color:#ec6b42">最热门</h3>                    <p>多款遥控卡通车</p>                    <img src="../images/tebuy/p2.png" alt="" />                 </div>              </div>              <div class="w50" onclick="window.location='teBuyListTwo.html'">                 <div class="box">                    <h3 style="color:#e95072">超值限量</h3>                    <p>精品乳制品</p>                    <img src="../images/tebuy/p3.png" alt="" />                 </div>              </div>              <div class="w50" onclick="window.location='teBuyListTwo.html'">                 <div class="box">                    <h3 style="color:#4a64ae">海外优品</h3>                    <p>营养又好吃</p>                    <img src="../images/tebuy/p4.png" alt="" />                 </div>              </div>           </div>                      <br style="clear:both;" />        </div>    <!-- goodShow end -->        <div class="tebuyTit"><h1><span></span>精品特卖</h1></div>   <p style="display:none">      <textarea id="Template-Items" rows="0" cols="0" >      <!--	
	// jquery.lazyload.min和jquery-jtemplates里面的语法,实现图2的下拉分页
      {#foreach $T.Items as apple}          <div class="saleBar">            <div class="pic"><img class="lazy" src="{$T.apple.Img}" alt="" /></div>            <div class="txt"><h2 class="nam">{$T.apple.Name}</h2> <span class="dat">剩<b>{$T.apple.days}</b>天</span><br style="clear:both;"></div>         </div>      {#/for}   -->      </textarea>   </p>      <!-- Output elements -->      <div id="Items" class="Content">      </div>      <div class="loading"><img src="../images/preloader.gif" alt="" /></div>


tempClass.html代码如下：


<script>
$(function() {
   //set template and process
   $("#Items").setTemplateElement("Template-Items").processTemplateURL("teBuyListTwo.json");
});

//format SalesPrice
function formatSalesPrice(date) {
   return date.replace('.','.<i>');
}

//next page load
$(function(){
   $(window).scroll(function(){
      // 当滚动到最底部以上100像素时， 加载新内容
      if ($(document).height() - $(this).scrollTop() - $(this).height()<10){
         loadMore();
      }

   });
});

$(function() {
   $("img").lazyload({
      placeholder : "../images/preloader.gif",
      event : "click"
   });
});

function loadMore(){
   $.ajax({
      type: "post",
      contentType: "application/json",
      url: "teBuyListTwo.json",
      beforeSend: function () {
         $(".loading").show();
      },
      success: function (data) {
         $("#Items").append("<div class='more'></div>");
         var lastDiv = $(".more:last")//chose last div has class more
         $(lastDiv).setTemplateElement("Template-Items").processTemplateURL("teBuyListTwo.json");
      },
      complete: function () {
         $(".loading").hide();
      },
      error: function (data) {
         console.info("error: " + data.responseText);
      }
   });
}

$(function() {
   $("img.lazy").lazyload({

      effect : "fadeIn"
   });
});
</script>
   <div class="classBanner">
      <img src="../images/tebuy/food.jpg" alt="" />
   </div>
   <div class="teBuyBar">
      <ul>
         <li><div class="line"><div class="txt"><h1>休闲零食休闲零食休闲零食休</h1><p>好吃不贵</p></div><div class="pic"><img src="../images/tebuy/food1.jpg" alt="" /></div></div></li>
         <li><div class="line"><div class="txt"><h1>营养品</h1><p>呵护宝宝健康成长</p></div><div class="pic"><img src="../images/tebuy/food2.jpg" alt="" /></div></div></li>
         <li><div class="line"><div class="txt"><h1>辅食</h1><p>环保健康</p></div><div class="pic"><img src="../images/tebuy/food3.jpg" alt="" /></div></div></li>
         <li><div class="line"><div class="txt"><h1>进口美食</h1><p>不知是鲜美</p></div><div class="pic"><img src="../images/tebuy/food4.jpg" alt="" /></div></div></li>
         <li style="clear:both"></li>
      </ul>
   </div>
      <!-- Templates -->
      <p style="display:none">
          <textarea id="Template-Items" rows="0" cols="0" >
         <!--
	    // jquery.lazyload.min和jquery-jtemplates里面的语法,实现图4的下拉分页		
         {#foreach $T.Items as apple}
               <div class="goodsList">
                  <ul>
                     <li>
                        <a href="#"><img class="lazy" src="{$T.apple.Img}" alt=""></a>
                        <p><a href="#">{$T.apple.Name}</a></p>
                        <p><span class="red"><i>&yen;</i>{formatSalesPrice($T.apple.SalesPrice)}</i></span><span class="oldPrice"><i>&yen;</i>{$T.apple.OldPrice}</span></p>
                     </li>
                     <li>
                        <a href="#"><img class="lazy" src="{$T.apple.Img2}" alt=""></a>
                        <p><a href="#">{$T.apple.Name2}</a></p>
                        <p><span class="red"><i>&yen;</i>{formatSalesPrice($T.apple.SalesPrice)}</i></span><span class="oldPrice"><i>&yen;</i>{$T.apple.OldPrice}</span></p>
                     </li>
                  </ul>
               </div>
         {#/for}
         -->
          </textarea>
      </p>
      <!-- Output elements -->
      <div id="Items" class="Content">

      </div>

      <div class="loading"><img src="../images/preloader.gif" alt="" /></div>







通过load()方法也能加载html片段而且能加载出图4的下拉分页效果，ajax的方法却不能加载出图4的下拉分页效果，这其中的原因也不是很清楚，姑且先拿load()方法用着吧。






































                

        

    

    
  



    

      

        

            

              
                
                  this_ITBoy
                
              
            

            

                关注
              
            

        

        

          
      

      










                



	

		

			

				
					
使用jQuery动态添加HTML元素

				
			

			

				

					TechChamp的博客
				

				

					09-23
					
					566
					
				

			

		

		

			
				
jQuery是一个流行的JavaScript库，它简化了JavaScript代码的编写，并提供了许多强大的功能和方法。其中一个重要的功能是使用jQuery动态添加HTML元素到网页中。除了添加段落元素，我们还可以使用类似的方法来添加其他类型的HTML元素，例如标题、链接、图像等。下面是一个示例，演示如何使用jQuery添加一个带有标题文本的。一旦引入了jQuery库，就可以开始使用它来动态添加HTML元素了。函数创建了一个新的段落元素，并将其赋值给变量。在上面的示例中，我们创建了一个新的。

			
		

	



                

            
              



	

		

			

				
					
load()方法---------jQuery动态加载html

				
			

			

				

					weixin_30339457的博客
				

				

					01-05
					
					1953
					
				

			

		

		

			
				
我的个人德州扑克项目https://github.com/mingzijian/pokers，欢迎给星星。
jquery代码
$("#div").load("test.html");




 test.html  ----------------被加载页面（有<HTML><HEAD><META><BODY>等的完整页面 ）	$...

			
		

	



              


  
              

                


	

		

			

				
					
关于Easyui的窗口和tab页面不执行JS的原因说明

				
			

			

				

					weixin_30565199的博客
				

				

					05-16
					
					239
					
				

			

		

		

			
				
一直以来很多人反应，在用tab加载界面的时候，界面里面的js不会执行。今天在此说明一下原因。不管是window，dailog还是tab其实质最终都是继承了panel。panel有两种方式展示内容。第一是直接硬编码写到出来。第二是通过href属性，加载外部html片段。在这里就就设计到了一个html片段的概念。这个概念在easyui的整体架构中，是一个很重要的概念，因为很多人没弄明白，所以从中引发出...

			
		

	





	

		

			

				
					
html引入片段,用jQuery加载HTML片段

				
			

			

				

					weixin_36452340的博客
				

				

					06-16
					
					857
					
				

			

		

		

			
				
我对jQuery，Ajax和类似的东西都很陌生。我已经找到了如何将HTML片段注入到我的网站的解决方案：用jQuery加载HTML片段$(document).ready(function(){$('a').click(openContent); //binding all anchors to this function});function openContent(){var path = $(...

			
		

	



		

			
		



	

		

			

				
					
jquery load html片段,jQuery .load（）调用未在加载的HTML文件中执行JavaScript

				
			

			

				

					weixin_30046717的博客
				

				

					06-21
					
					193
					
				

			

		

		

			
				
小编典典您正在将整个HTML页面加载到div中，包括html，head和body标签。如果您执行加载并且仅在加载的HTML中包含打开脚本，关闭脚本和JavaScript代码，会发生什么情况？这是驱动程序页面：jQuery Load of Scriptgoogle.load("jquery", "1.3.2");$(document).ready(function(){$("#myButton")....

			
		

	





	

		

			

				
					
用Jquery.load载入页面实现局部刷新

				
			

			

				

					10-26
				

			

		

		

			
				
在使用.load()方法加载新内容时，应当确保新内容中不包含重复的和标签，只包含需要加载的页面片段。例如，在上文例子中，我们只加载B页面的中的内容，而不是整个B页面。  2. 在原页面上重新定义样式。由于加载的内容...

			
		

	





	

		

			

				
					
用Jquery.load载入页面后样式没了页面混乱的解决方法

				
			

			

				

					10-25
				

			

		

		

			
				
首先，jQuery的`.load()`方法是用来异步加载HTML片段并插入到指定的DOM元素中。它的基本语法是：  ```javascript $(selector).load(url, data, callback); ```  - `selector`：选择器，用于指定要插入内容的目标元素...

			
		

	





	

		

			

				
					
利用JQuery的load函数动态加载其它页面的内容的实现代码

				
			

			

				

					12-09
				

			

		

		

			
				
在本文中，我们将深入探讨如何使用jQuery的load函数来动态加载其他页面的内容。这个功能对于创建交互式和响应式的Web应用程序非常有用，因为它允许我们不刷新整个页面的情况下更新指定的DOM元素。  首先，让我们理解...

			
		

	





	

		

			

				
					
jQuery中Ajax的load方法详解

				
			

			

				

					10-24
				

			

		

		

			
				
jQuery的load方法是一种非常实用的Ajax方法，它允许开发者从服务器上远程加载HTML代码，并将其插入到当前文档的DOM中。这种方法的优点在于它的简洁性和易用性，无需过多配置就能实现动态的内容加载。  #### load方法...

			
		

	





	

		

			

				
					
jquery load方法 二次加载后加载事件失效

					
最新发布

				
			

			

				

					06-04
				

			

		

		

			
				
 使用load加载内容（示例） $('#container').load('partial.html'); ```  #### ✅ 关键点 - **`document`** 作为委托根元素（更推荐使用离动态元素最近的**静态父容器**，如`$('#static-parent').on(...)`） - **`....

			
		

	





	

		

			

				
					
使用jQuery的 load() 方法加载html公共模块

				
			

			

				

					橙-极纪元-JJYCheng
				

				

					03-18
					
					4772
					
				

			

		

		

			
				
例如：网站头部


 $(".header").load("header.html");

例如：网站导航


 $(".nav").load("nav.html");

例如：网站底部


 $(".footer").load("footer.html");





官方解释


转载：https://www.runoob.com/jquery/jquery-ajax-load.html


jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

lo..

			
		

	





	

		

			

				
					
使用jquery.load  处理  HTML页面公共部分引入

				
			

			

				

					King Saj
				

				

					12-03
					
					1861
					
				

			

		

		

			
				
HTML公用部分抽离出来使用,使后期维护起来更加方便

创建一个index.html页面, 和common文件夹(用来存储公用页面部分)
header.html
<header class="mui-bar mui-bar-nav">
	<h1 class="mui-title">头部公共部分</h1>
</header>

footer.html
<footer>底部公用内容</footer>

index.html
<!DOC

			
		

	





	

		

			

				
					
jq+载入html页面,使用jQuery加载html页面到指定的div实现方法

				
			

			

				

					weixin_31680649的博客
				

				

					05-30
					
					1344
					
				

			

		

		

			
				
一、jQuery加载一个html页面到指定的div里把a.html里面的某一部份的内容加载到b.html的一个div里。比如：加载a.html里面的用jquery ajax 可以实现假设 a.html 和b.html在同一目录b.html$(document).ready(function() {bodyContent = $.ajax({url: "b.html",global: false,t...

			
		

	





	

		

			

				
					
jQuery加载html文档的几种方法

				
			

			

				

					qq_38921377的博客
				

				

					06-27
					
					1457
					
				

			

		

		

			
				
jQuery加载html文档的几种方法

			
		

	





	

		

			

				
					
jQuery动态加载html

				
			

			

				

					aswang的专栏
				

				

					09-19
					
					590
					
				

			

		

		

			
				
	在以往使用jquery的过程中，如果需要动态加载某个信息，一般的处理方法都是通过action去查询信息，然后通过json返回给jsp页面，在页面中使用javascript拼凑出指定的样式，例如表格。这个拼凑的过程是很烦人的，而且特别容易出错，调试也很麻烦。
	之所以这么麻烦，完全是因为对jquery不够熟悉，后来了解到jquery有个load方法，可以动态加载某个action的执行结果到指定的...

			
		

	





	

		

			

				
					
使用jquery实现动态加载片段

				
			

			

				

					u012631731的博客
				

				

					06-05
					
					1129
					
				

			

		

		

			
				
之前分享一篇直接操作dom元素，使用create方法动态增加片段，这里分享一篇直接使用jquery的方式加载：
我们把方法实现和片段显示放在两个文件中，这里是展示图片片段的function，我们写在my.js中

function showImages(elementId, num) {
    var listHtml = '';
    $(elementId).append(listH

			
		

	





	

		

			

				
					
jquery load 加载html页面,jQuery .load()调用在加载的html文件中不执行javascript

				
			

			

				

					weixin_39726379的博客
				

				

					06-04
					
					334
					
				

			

		

		

			
				
您正在将整个HTML页面加载到您的div，包括html，head和body标签。如果您执行加载并且只在您加载的HTML中有开始脚本，关闭脚本和JavaScript代码，会发生什么？这里是驱动程序页面：jQuery Load of Scriptgoogle.load("jquery", "1.3.2");$(document).ready(function(){$("#myButton").clic...

			
		

	





	

		

			

				
					
利用jQuery load 方法加载HTML公共页面,导航菜单自动选中

					
热门推荐

				
			

			

				

					xiaogege2012的专栏
				

				

					06-24
					
					1万+
					
				

			

		

		

			
				
最近做了一个纯静态页面的网页，有一些页面的公共部分，不想重复在每一个html 中编写，想用
"header.html" -->
 ,发现引用不了，不起作用。
后来知道，include是SSI（Server Side Include），在html中不支持include。

查了下资料，看到jQuery的load方法可以引用其他html
 页面，用了下，果然很方便。记录一下
公共页面：h

			
		

	





	

		

			

				
					
jquery 动态加载html,利用JQuery的load函数动态加载其它页面的内容的实现代码

				
			

			

				

					weixin_30349167的博客
				

				

					06-08
					
					243
					
				

			

		

		

			
				
在线演示:http://demo.jb51.net/js/JQueryload/index.htm全部代码JQuery - Load#header {margin-bottom: 1em;padding-bottom: 1em;border-bottom: 1px solid #eee;}.buttonListArea {float: left;width: 150px;padding-right...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值