最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery.load()事件使用方法详解
时间:2022-11-14 22:03:20 编辑:袖梨 来源:一聚教程网
.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] ) 返回: jQuery
描述: 载入远程 HTML 文件代码并插入至 DOM 中。
version added: 1.0.load( url, [ data ], [ complete(responseText, textStatus, XMLHttpRequest) ] )
url一个包含发送请求的URL字符串
data向服务器发送请求的Key/value参数,例如{name:"愚人码头",age:23}
complete(responseText, textStatus, XMLHttpRequest)当请求成功后执行的回调函数。
这个方法是从服务器获取数据最简单的方法。除了是一个不是全局函数,这个方法和$.get(url, data, success) 基本相同,它有一种隐含的回调函数。 当他检查到一个成功的请求(i.e. 当 textStatus是 "success" 或者 "notmodified"),.load() 方法将返回的HTML 内容数据设置到相匹配的节点中。这就意味着大多数采用这个方法可以很简单:
$('#result').load('ajax/test.html');如果提供回调,都将在执行后进行后处理:
代码如下 | 复制代码 |
$('#result').load('ajax/test.html', function() { |
在上文的两个例子中, 如果当前的文件不包含ID为“result”的元素,那么.load()方法将不被执行。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。
注意: 事件处理函数中也有一个方法叫 .load()。 哪一个被使用取决于传递的参数设置。
加载页面片段
.load() 方法, 不像 $.get(),允许我们指定远程文件被插入的部分。 他是一个特殊的 url 参数。 一个或多个空格字符被包括在这个 url 参数字符串中, 在这个字符串被第一空格划分jQuery选择内容将被载入。
我们可以修改上述例子中,只有“#container”部分被载人到文件中:
$('#result').load('ajax/test.html #container');当这种方法执行, 它将检索 ajax/test.html 页面的内容,jQuery会获取ID为 container 元素的内容,并且插入到ID为 result 元素,而其他的被检索到的元素将被废弃。
举例:
例子: Load the main page's footer navigation into an ordered list.
代码如下 | 复制代码 |
Footer navigation:
|
Demo:
例子: 显示一个信息如果Ajax请求遭遇一个错误
代码如下 | 复制代码 |
Successful Response (should be blank): Error Response: |
Demo:
例子: 将feeds.html 文件载人到 ID为feeds的DIV.
代码如下 | 复制代码 |
$("#feeds").load("feeds.html"); 结果: 45 feeds found.
|
例子: 发送数组形式的data参数到服务器。
代码如下 | 复制代码 |
$("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } ); |
例子: 同上, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.
代码如下 | 复制代码 |
$("#feeds").load("feeds.php", {limit: 25}, function(){ |
一:如何使用data
1.加载一个php文件,该php文件不含传递参数
代码如下 | 复制代码 |
$("#myID").load("test.php"); |
//在id为#myID的元素里导入test.php运行后的结果
2. 加载一个php文件,该php文件含有一个传递参数
代码如下 | 复制代码 |
$("#myID").load("test.php",{"name" : "Adam"}); |
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam
3. 加载一个php文件,该php文件含有多个传递参数。注:参数间用逗号分隔
代码如下 | 复制代码 |
$("#myID").load("test.php",{"name" : "Adam" ,"site":"61dh.com"}); |
//导入的php文件含有一个传递参数,类似于:test.php?name=Adam&site=61dh.com
4. 加载一个php文件,该php文件以数组作为传递参数
代码如下 | 复制代码 |
$("#myID").load("test.php",{'myinfo[]', ["Adam", "61dh.com"]}); |
//导入的php文件含有一个数组传递参数。
注意:使用load,这些参数是以POST的方式传递的,因此在test.php里,不能用GET来获取参数。
二:如何使用callback
比如我们要在load方法得到服务器响应后,慢慢地显示加载的内容,就可以使用callback函数。代码如下:
代码如下 | 复制代码 |
$("#go").click(function(){ $("#myID").load("welcome.php", {"lname" : "Cai", "fname" : "Adam", function(){ $("#myID").fadeIn('slow');} ); }); |
备注:
在load的url里加上空格后面就可以跟选择器了。
例如:
代码如下 | 复制代码 |
$("body").load("test.html #a"); |
相关文章
- 人们熟悉的寄居蟹属于以下哪种分类 神奇海洋11月21日答案 11-21
- 第五人格11.22共研服有什么更新 11月22日共研服更新内容介绍 11-21
- 原神恰斯卡怎么培养 11-21
- 无期迷途四星装束是谁 11-21
- 王者荣耀帝丹高中校服怎么获得 11-21
- 光遇姆明季后续版本怎么玩 11-21