国内领先的企业通信解决方案服务商专业提供平价宽带,平价固话,平价项目工程方案!
“我们业务范围:光纤宽带,IP城域网,无线固话,有线固话,网络固话,固话靓号,综合布线,200IP业务,电子群真等,业务电话:4008-528-159”

全部 综合网络技术 常见电话故障 宽带常见问题 业务综合问题 常用技术文章 产品参数文章
首页 > 帮助中心 > 利用Jquery的load函数实现页面的动态加载

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

类别: 常用技术文章    来源:www.nanyuetong.com
摘要:利用Jquery的load函数实现页面的动态加载     js的强大功能相信大家都知晓,今天通过jquery的库函数load可以更加方便的实现页面...

利用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"的元素内容!

收藏本页】 【返回顶部】 【关闭窗口

将该资讯分享至:
回顶部 
官方微信