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

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

  1. Winform开发框架之客户关系管理系统(CRM)的开发总结系列4-Tab控件页面的动态加载

    在前面介绍的几篇关于CRM系统的开发随笔中,里面都整合了多个页面的功能,包括多文档界面,以及客户相关信息的页面展示,这个模块就是利用DevExpress控件的XtraTabPage控件的动态加载实现的 ...

  2. AppCan学习笔记----关闭页面listview动态加载数据

    AppCan页面关闭 AppCan 的页面是由两个HTML组成,如果要完全关闭的话需要在主HTML eg.index.html中关闭,关闭方法:appcan.window.close(-1); 管道 ...

  3. 页面滚动动态加载数据,页面下拉自动加载内容 jquery

    <!DOCTYPE=html> <html> <head> < script src="js/jquery.js" type=" ...

  4. Jquery页面滚动动态加载数据,页面下拉自动加载内容

    <!DOCTYPE=html> <html> <head> <script src="js/jquery.js" type="t ...

  5. jQuery+ajax实现滚动到页面底部自动加载图文列表效果

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. Jquery+php鼠标滚动到页面底部自动加载更多内容,使用分页

    1.index.php <style type="text/css"> #container{margin:10px auto;width: 660px; border ...

  7. js、jquery的入口函数及其执行与图片加载的先后顺序

    js的入口函数写法: window.onload = function() { }; 如果文件中有多个window.onload入口函数,则只会执行最后一个,之前的入口函数没有用. jquery的入口 ...

  8. [JS前端开发] js/jquery控制页面动态加载数据 滑动滚动条自动加载事件

    页面滚动动态加载数据,页面下拉自动加载内容 相信很多人都见过瀑布流图片布局,那些图片是动态加载出来的,效果很好,对服务器的压力相对来说也小了很多 有手机的相信都见过这样的效果:进入qq空间,向下拉动空 ...

  9. jquery动态加载js/css文件方法

    先来看jquery自带的getSrcript文件 方法 代码如下 复制代码 $.getScript(url,callback) 实例 代码如下 复制代码 var testVar = 'New JS l ...

随机推荐

  1. ejb 远程调用

    1,客户端代码: package com.example.test; import java.util.Hashtable; import java.util.Properties; import j ...

  2. json的解释

    JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.JSON采用完全独立于语言的文本格式,这些特性使JSON成为理想的数据交换语言.易于人阅读和编写,同时也易 ...

  3. css005 用层叠管理多样式

    css005 用层叠管理多样式 当一个元素继承多个样式时,最近的祖先样式胜出(通俗一点就是自己有就用自己的,自己没有找parent,parent没有找grandprent,再没有就一级一级网上找) 当 ...

  4. 在不同的pyhon版本中切换

    issue discription 在一台电脑上同时安装了python2.7和python3.5,怎样在这两个版本中切换调用? solution to the issue 进入python安装文件夹, ...

  5. IDEA 搭建的SpringMVC Maven项目出现的问题

    1.添加jar包时,报添加某个jar包有问题,在pom.xml文件的project节点上有红波浪线 jar引用的maven地址没有问题,就是报错 解决办法:到本地仓库把相关jar包删掉重新下载 2.各 ...

  6. ubuntu分区

    参考网址:http://jingyan.baidu.com/article/60ccbceb18624464cab197ea.html

  7. Java——包的概念及使用

    package是在使用多个类或接口时,为了避免名称重复而采用的一种措施,直接在程序中加入package关键字即可 编译语法: javac -d . HelloWord.java -d:表示生成目录,生 ...

  8. JavaScript排序算法——希尔排序

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  9. JavaWeb文件下载,提示用户保存而不是让浏览器直接打开

    1.通过HttpServletResponse对象实现文件下载 服务端向客户端游览器发送文件时,如果是浏览器支持的文件类型,一般会默认使用浏览器打开,比如txt.jpg等,会直接在浏览器中显示,如果需 ...

  10. Yii2 – 如何写一个插件 , 如何做一个扩展

    原文地址: http://www.fancyecommerce.com/2016/05/10/yii2-%E5%A6%82%E4%BD%95%E5%86%99%E4%B8%80%E4%B8%AA%E6 ...