转载

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

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"的元素内容！

正文到此结束

所属分类：编程技术

本文标签： map HTML文件 Document js HTML src ip 代码百度服务器 CSS 参数 PHP 数据 value 调试 key jquery 实例
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

其他链接

关于本站

本站定位：个人技术类博客

本站作用：写博客、记日志、闲聊扯淡鼓捣技术。

问题交流

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