利用Jquery的load函数实现页面的动态加载

た入场券 2022-03-12 05:09 355阅读 0赞

js的强大功能相信大家都知晓，今天通过jquery的库函数load可以更加方便的实现页面的动态刷新，经过几天的研究与探索，终于有所成效！吾心甚蔚！

一、基本语法为：

**   $('\#****区域****id').load('****页面名称****');**

具体来说，此事件有4个方法，格式分别是：

1、load(url)

2、load(url,\[data\])

3、load(url,\[callback\])

4、load(url,\[data\],\[callback\])

url (String) : 待装入 HTML 网页网址。

data (Map) : (可选) 发送至服务器的 key/value 数据。

callback (Callback) : (可选) 载入成功时回调函数。

##   二、下面以具体实例来分析其效果： ##

实例1，用第一个方法加载一个文件：

$("\#box").load("testa.html"); //在id为box的元素里加载testa.html页面执行后的结构！

实例2，用第二个方法加载一个文件（需要参数）：

$("\#box").load("testa.html",\{name:"bingo",sex:"man"\}); //传2个参数到testa.html页面，并在id为box的元素里加载testa.html页面执行后的结构！

实例3，用第三种方法加载一个文件：

$("\#box").load("testa.html",function()\{alert("OK!");\}); //在id为box的元素里加载testa.html页面执行后的结构，并在执行完之后触发后面的function！

#      三、接下来是一个本人具体的代码实例： #

1.包含库函数，类似于C语言文件包含命令，同css包含

<script src="js/jquery-2.1.4.min.js"></script>

红色部分为js路径

2.定义load函数功能：

<script>
    $(document).ready(function()
    {
      $("#button").click(function()
      {
         $('#home').load("ok.html");
      })
    })
    </script>

功能指的是在id为button的属性，发生click时，让id为Home的div加载ok.html这个网页

3.具体位置代码如下：

<a id="button">OK</a>
    
    <div id="home">
    </div>

其中Home为提前定义好的div

四、其他注意事项：

1.load函数最好在php网页中应用，也就是说要在php服务器上运行，本地调试需要搭建php本地环境，相对麻烦但是可以百度到；

2.在load的url里加上空格后面就可以跟选择器了。

例如：$("\#box").load("testa.html \#test"); //加载testa.html文件中id为"test"的元素内容！

发表评论取消回复

表情：

评论列表（有 0 条评论，355人围观）

还没有评论，来说两句吧...

相关阅读

相关 jQuery 页面加载的区别和编程

在开发网页时，我们经常需要在页面加载完成后执行一些特定的操作，例如修改元素内容、绑定事件或者发送 AJAX 请求等。而 jQuery 是一个广泛使用的 JavaScript 库

超、凢脫俗/ 2023年10月16日 15:13/ 0 赞/ 38 阅读

相关 jQuery实现页面滚动时动态加载内容的方法

本文实例讲述了jQuery实现页面滚动时动态加载内容的方法。分享给大家供大家参考。具体分析如下：很多网站，比如twitter，京东商城首页，会在页面滚动到一定的位置时才动态

悠悠/ 2022年07月11日 16:03/ 0 赞/ 410 阅读

相关利用Jquery的load函数实现页面的动态加载

　　js的强大功能相信大家都知晓，今天通过jquery的库函数load可以更加方便的实现页面的动态刷新，经过几天的研究与探索，终于有所成效！吾心甚蔚！　　一、基本语法为：

迷南。/ 2022年06月05日 08:05/ 0 赞/ 279 阅读

相关 jQuery的load方法设计动态加载及解决被加载页面js

> 上面提了下jQuery的load方法，感觉这需要记录下： jQuery load()方式是一个简单强大的ajax方法。 > load()从服务器获取数据，并把返

布满荆棘的人生/ 2022年06月02日 22:53/ 0 赞/ 396 阅读

相关加载页面增加一个loading

1.设置css(如果写入css文件,就要在html引入css) <style> .loader { //这个注解会影响到页面中<a>和<button>的点击事件 po

心已赠人/ 2022年05月19日 00:40/ 0 赞/ 294 阅读

相关动态加载Jquery库

有时候，我们可能不会在网页中<script src="jquery.min.js" 来加载 Jquery 库，可能在用户点击某个按钮后，才去加载 Jquery 库。好处不用我说

柔情只为你懂/ 2022年05月15日 11:12/ 0 赞/ 261 阅读

相关利用Jquery的load函数实现页面的动态加载

js的强大功能相信大家都知晓，今天通过jquery的库函数load可以更加方便的实现页面的动态刷新，经过几天的研究与探索，终于有所成效！吾心甚蔚！一、基本语法为

た入场券/ 2022年03月12日 05:09/ 0 赞/ 356 阅读

相关 jquery关于load()加载页面遇见的坑(js代码使用不了)

> 第一步：使用load把外部的html引入（但是无法实现引入代码里js的效果） > 第二步：解决第一步的问题，把外部引入html的js代码重新装入另外一个js文件里面，这里

喜欢ヅ旅行/ 2021年12月04日 01:31/ 0 赞/ 1080 阅读

相关 vue静态页面加载之前loading

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta

布满荆棘的人生/ 2021年07月26日 12:37/ 1 赞/ 899 阅读

相关 jQuery Lazy Load 图片延迟加载

基于 `jQuery` 的图片延迟加载插件，在用户滚动页面到图片之后才进行加载。对于有较多的图片的网页，使用图片延迟加载，能有效的提高页面加载速度。注意事项：需

水深无声/ 2021年06月26日 16:06/ 0 赞/ 1399 阅读