Jquery load()方法加载html片段

最新推荐文章于 2021-06-16 10:27:14 发布
VIP文章 最新推荐文章于 2021-06-16 10:27:14 发布
阅读量1.3w 收藏 3
点赞数 2
文章标签： html load方法
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/this_itboy/article/details/50906913
版权

在上一个案例中用的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" οnclick="temp(0);$(this).addClass('cur');">特卖</li>
         <li class="" οnclick="temp(1);$(this).addClass('cur');">用品</li>
         <li class="" οnclick="temp(2);$(this).addClass('cur');">玩具</li>
         <li class="" οnclick="temp(3);$(this).addClass('cur');">居家</li>
         <li class="" οnclick="temp(4);$(this).addClass('cur');">食品</li>
      </ul>
   </div>
    <div class="main" id="temp"> //需要替换的Div   
        <div class="promotion">
           <div class="flashBuy">
              <div class="box" οnclick="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" οnclick="window.location='teBuyListTwo.html'">
                 <div class="box btLine">
                    <h3 style="color:#f18c1a</
最低0.47元/天 解锁文章
this_ITBoy
关注
  • 2
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
jQuery load方法用法集锦
12-03
调用load方法的完整格式是：load( url, [data], [callback] ),其中 url：是指要导入文件的地址。 data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件...
load()方法---------jQuery动态加载html
weixin_30339457的博客
01-05 1797
我的个人德州扑克项目https://github.com/mingzijian/pokers，欢迎给星星。 jquery代码 $("#div").load("test.html"); test.html ----------------被加载页面（有<HTML><HEAD><META><BODY>等的完整页面 ） $...
html引入片段,用jQuery加载HTML片段
weixin_36452340的博客
06-16 759
我对jQuery，Ajax和类似的东西都很陌生。我已经找到了如何将HTML片段注入到我的网站的解决方案：用jQuery加载HTML片段$(document).ready(function(){$('a').click(openContent); //binding all anchors to this function});function openContent(){var path = $(...
关于Easyui的窗口和tab页面不执行JS的原因说明
weixin_30565199的博客
05-16 195
一直以来很多人反应，在用tab加载界面的时候，界面里面的js不会执行。今天在此说明一下原因。不管是window，dailog还是tab其实质最终都是继承了panel。panel有两种方式展示内容。第一是直接硬编码写到出来。第二是通过href属性，加载外部html片段。在这里就就设计到了一个html片段的概念。这个概念在easyui的整体架构中，是一个很重要的概念，因为很多人没弄明白，所以从中引发出...
使用jQuery的 load() 方法加载html公共模块
橙-极纪元-cplvfx-JJY.Cheng
03-18 3788
例如：网站头部 $(".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加载html文档的几种方法
qq_38921377的博客
06-27 1325
jQuery加载html文档的几种方法
用jQuery的load方法动态加载页面，以及脚本问题
weilikk的博客
08-19 5922
一、了解load方法 load(url, [data], [callback]) 概述 载入远程 HTML 文件代码并插入至 DOM 中。 默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML 文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例。 参数 url,[data,[callback]]String,Map/String,CallbackV1.0
详解jQuery lazyload 懒加载
10-20
Lazy Load是一个用 JavaScript 编写的jQuery插件. 它可以延迟加载长页面中的图片. 本文对它进行实例介绍，具有很好的参考价值，下面跟着小编一起来看下吧
jQuery中Ajax的load方法详解
12-09
DOCTYPE html> <html> <head lang=”en”>  <meta charset=”UTF-8″>  <title></title> </head> <body> <input type=”button” value=”Ajax提交” onclick=”...
jQuery Ajax之load()方法
01-19
load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为： 　load( url [, data][, callback] ) 　load()方法参数解释见下表： 参数名称 类　型 说　明 url String ...
html被载入方法,如何使用jQuery的load方法加载外部HTML文件
weixin_36269724的博客
06-02 710
jQuery是JavaScript的一个库，jQuery中的load方法可以用来加载外部HTML文件，那么，本篇文章我们就来看一下jQuery中的load方法是如何加载外部HTML文件的。首先我们来看一下load是什么？load可以在读取另一个HTML上写的内容时使用。例如，当有的菜单栏是共用的时候，在每个页面上都来写一个菜单栏就会很麻烦，这时就可以利用jQuery的load方法来读取其他页面上菜...
js中load载入html页面,使用jquery的load方法加载html页面，但是html引入的js不生效
weixin_35792271的博客
05-31 2677
Write By Monkeyfly以下内容均为原创，如需转载请注明出处。前提有一个公共的登录弹框页面需要在多个页面引用，百度后就使用了jQuery 的 load 方法。做法：将公共的 html 页面提取出来，放在一个独立的 HTML 文件中。然后在需要使用的 html 页面中，使用 jQuery 的 load 方法进行引用即可。注：提取的部分，不需要包含多余的、等标签，只需要放置你所用到的标签即...
ajax载入html文档,jQuery Ajax之load()方法
weixin_36413157的博客
05-31 362
load()方法是jQuery中最为简单和常用的Ajax方法，能载入远程HTML代码并插入到DOM中。它的语法结构为：load( url [, data][, callback] )load()方法参数解释见下表：参数名称类　型说　　明urlString请求HTML页面的URL地址data(可选)Object发送至服务器的key/value数据callback(可选)Function请求完成时的回...
利用jQuery load 方法加载HTML公共页面,导航菜单自动选中
热门推荐
xiaogege2012的专栏
06-24 1万+
最近做了一个纯静态页面的网页，有一些页面的公共部分，不想重复在每一个html 中编写，想用 "header.html" --> ,发现引用不了，不起作用。 后来知道，include是SSI（Server Side Include），在html中不支持include。 查了下资料，看到jQuery的load方法可以引用其他html 页面，用了下，果然很方便。记录一下 公共页面：h
使用jquery.load 处理 HTML页面公共部分引入
King Saj
12-03 1709
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
自动加载html,jQuery实现的自动加载页面功能示例
weixin_36322454的博客
05-31 483
本文实例讲述了jQuery实现的自动加载页面功能。分享给大家供大家参考，具体如下：demo.html：---------------阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮阅谁问君诵，水落清香浮+++++++++++++++scrollpagination.js：(function( ...
前端图片懒加载插件jquery.lazyload.min.js
蜗牛小前的博客
02-28 4228
HTML部分 &lt;img class="lazy" data-original="/img/ercode_bottom.png"/&gt; 页面引入 &lt;script type="text/javascript" src="/js/jquery-1.7.2.min.js?v=2019022701"&gt;&lt;/script&gt; &lt;scrip
js load html页面消失,使用jquery的load方法加载html页面，但是html引入的js不生效
weixin_39688636的博客
06-04 464
Write By Monkeyfly以下内容均为原创，如需转载请注明出处。前提有一个公共的登录弹框页面需要在多个页面引用，百度后就使用了jQuery 的 load 方法。做法：将公共的 html 页面提取出来，放在一个独立的 HTML 文件中。然后在需要使用的 html 页面中，使用 jQuery 的 load 方法进行引用即可。注：提取的部分，不需要包含多余的、等标签，只需要放置你所用到的标签即...
JQuery load 方法使用
最新发布
06-08
JQuery 的 load() 方法可以用于从服务器加载数据，并把返回的数据放入指定的 HTML 元素中。它的语法如下： ```javascript $(selector).load(url, data, callback); ``` 其中： - selector：要加载数据的 HTML 元素的选择器。 - url：要从服务器加载数据的 URL。 - data：要发送到服务器的数据，可以是字符串或对象。 - callback：数据加载完成后要执行的回调函数。 例如，如果要把服务器上的一个 HTML 文件加载到 id 为 myDiv 的 div 元素中，可以这样写： ```javascript $("#myDiv").load("myPage.html"); ``` 如果要发送一些数据到服务器，可以这样写： ```javascript $("#myDiv").load("myPage.php", {name: "John", age: 30}); ``` 如果需要在数据加载完成后执行一些操作，可以在 load() 方法中传入一个回调函数： ```javascript $("#myDiv").load("myPage.html", function() { alert("数据加载完成"); }); ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值