利用Jquery的load函数实现页面的动态加载
来源:互联网 发布:java应用 编辑:程序博客网 时间:2024/06/08 05:16
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”的元素内容!
这个世界上没有知识是学不会的,不是吗?如果一开始学不会,就可以把问题细化分解,然后学习更基本的知识。最后,所有问题都能变得和1+1=2一样简单,我们需要的只是时间。好了,最后给大家推荐一个学习Java的好网站JAVA自学网站–how2j.cn
- 利用Jquery的load函数实现页面的动态加载
- 【HTML/JS】利用JQuery的load函数动态加载其它页面的内容的实现代码
- 利用JQuery的load函数动态加载页面 以及jQuery动态加载页面和请求所返回的数据
- [HTML/JS]利用JQuery的load函数动态加载其它页面的内容的实现代码代替Ifram
- jquery的load函数实现页面的局部加载
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
- jQuery的load方法设计动态加载及解决被加载页面js
- jquery动态加载页面 load方法 注意事项
- jQuery实现页面滚动时动态加载内容的方法
- jquery.load()函数 在JSP中局部加载刷新页面时的参数传递及获取
- Jquery load()加载GB2312页面时出现乱码的解决方法
- jQuery使用ajax的load()加载页面方法
- $.load加载动态页面ie失效,js失效的问题
- jquery的load方法为元素动态加载内容
- jquery中load()加载页面,刷新之后,加载的页面不显示的解决办法
- 静态加载页面的load()
- 利用反射实现类的动态加载
- 利用反射实现类的动态加载
- echarts 的Can't get dom width or height 坑
- 树、森林与二叉树的转换
- length 一位数约束为两位数字
- 模拟实现strncpy ,模拟实现strncat ,模拟实现strncmp
- 新的一天
- 利用Jquery的load函数实现页面的动态加载
- git 基本命令操作。
- 一个简单的demo说明集成reactnative到android项目
- python连接redis库发布消息
- Spring+SpringMVC+Mybatis 整合【非maven项目】
- Linux 信号signal处理机制【转】
- 交叉熵代价函数
- python读取Excel到Mysql
- 2017第八届广州国际新能源汽车工业展览会会刊(参展商名录)