jQuery使用ajax的load()加载页面方法
2015-03-01 16:40
686 查看
在jQuery ajax的load()方法能够载入远程 HTML 文件代码并插入至 DOM 中,这个与post,get还是有一点的区别,但可以快速在页面加载时就加载一个页面的html保存到dom中并且可执行哦。
load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式.
- 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".
讲解:
load是最简单的Ajax函数, 但是使用具有局限性:
1.它主要用于直接返回HTML的Ajax接口
2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:
load()函数:
函数介绍:load(url, [data], [callback]) 返回值:jQuery
参数说明:
url:待装入 HTML 网页网址。
data:(可选参数)发送至服务器的 key/value 数据。
callback:(可选参数)载入成功时回调函数。
下面进行实例演示:
首先建立需要加载的test.html文件:
然后建立ajax.html文件,记得引入jquery。
上面的示例演示了如何使用Load方法.
提示:我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.
提示: 当在url参数后面添加了一个空格, 比如" "的时候, 会出现"无法识别符号"的错误, 请求还是能正常发送. 但是无法加载HTML到DOM. 删除后问题解决.
原文来自:
100脚本网
load()方法默认使用 GET 方式, 如果传递了data参数则使用Post方式.
- 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中,可以指定选择符,来筛选载入的 HTML 文档,DOM 中将仅插入筛选出的 HTML 代码。语法形如 "url #some > selector", 默认的选择器是"body>*".
讲解:
load是最简单的Ajax函数, 但是使用具有局限性:
1.它主要用于直接返回HTML的Ajax接口
2.load是一个jQuery包装集方法,需要在jQuery包装集上调用,并且会将返回的HTML加载到对象中, 即使设置了回调函数也不过不可否认load接口设计巧妙并且使用简单.下面通过示例来演示Load接口的使用:
load()函数:
函数介绍:load(url, [data], [callback]) 返回值:jQuery
参数说明:
url:待装入 HTML 网页网址。
data:(可选参数)发送至服务器的 key/value 数据。
callback:(可选参数)载入成功时回调函数。
下面进行实例演示:
首先建立需要加载的test.html文件:
代码如下 | 复制代码 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>ajax演示</title> </head> <body> php点点通(www.php100.com),关注php开发,提供专业web开发教程! </body> </html> |
代码如下 | 复制代码 |
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="./jquery-1.7.1.min.js"></script> <script> $(document).ready(function(){ $("#btn").click(function(){ $("#result").load("test.html",function(responseText,textStatus){ $("#display").append("<hr>responseText:"+responseText); $("#display").append("<hr>textStatus:"+textStatus); }); }); }); </script> </head> <body> <input type="button" value="测试" id="btn" /> <h2>显示的内容如下:</h2> <div id="result"></div> <h2>结果:</h2> <div id="display"></div> </body> </html> |
提示:我们要时刻注意浏览器缓存, 当使用GET方式时要添加时间戳参数 (net Date()).getTime() 来保证每次发送的URL不同, 可以避免浏览器缓存.
提示: 当在url参数后面添加了一个空格, 比如" "的时候, 会出现"无法识别符号"的错误, 请求还是能正常发送. 但是无法加载HTML到DOM. 删除后问题解决.
原文来自:
100脚本网
相关文章推荐
- 使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
- jquery之利用ajax与服务器交谈(加载内容到元素上之利用jquery加载内容,使用load()方法)
- jquery中页面Ajax方法$.load的功能使用介绍
- jquery中页面Ajax方法$.load的功能使用介绍
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
- 使用jquery的load方法设计动态加载,并解决被加载页面JavaScript失效问题
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- Jquery(Ajax)load使用方法 结合radio切换视图
- 使用jQuery的load()进行页面模块化加载
- 使用ajax加载的页面中包含的javascript的解决方法
- jquery中的load方法加载页面无法缓存问题
- .NET中使用Jquery和Ajax(三) - load加载
- JQuery缓冲加载图片插件lazyload.js的使用方法
- jQuery的load方法,可用于单独加载页面中的某个独立模块
- 使用jquery的load()方法实现页面局部刷新
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- 缓冲加载图片的 jQuery 插件 lazyload.js 使用方法详解
- jQuery的ajax()检验用户名;通过jQuery的load()/get()/post()方法实现;使用XMLHTTPRequest对象来进行AJAX的异步数据交互