描述: 从服务器载入数据并且将返回的 HTML 代码并插入至 匹配的元素 中。
-
添加的版本: 1.0.load( url [, data ] [, complete(responseText, textStatus, XMLHttpRequest) ] )
-
url类型: String一个包含发送请求的URL字符串
-
data类型: PlainObject, String向服务器发送请求的Key/value参数,例如{name:””,age:23}
-
complete(responseText, textStatus, XMLHttpRequest)类型: Function()当请求成功后执行的回调函数。
-
注意: 事件处理函数中也有一个方法叫
.load()
。 jQuery根据传递给它的参数设置来确定使用哪个方法执行。
这个方法是从服务器获取数据最简单的方法。除了不是全局函数,这个方法和$.get(url, data, success)
基本相同,它有一个隐含的回调函数。 当他检查到一个成功的请求(i.e. 当 textStatus
是 “success” 或者 “notmodified”)时,.load()
方法将返回的HTML 内容数据设置到相匹配的节点中。这就意味着大多数采用这个方法可以很简单:
1
|
|
如果选择器没有匹配的元素——在这种情况下,如果document不包含id = “result” 的元素- 这个Ajax请求将不会被发送出去。
如果提供回调,都将在执行后进行后处理:
Callback Function
如果提供了 “complete” 回调函数,它将在函数处理完之后,并且 HTML 已经被插入完时被调用。回调函数会在每个匹配的元素上被调用一次,并且 this
始终指向当前正在处理的 DOM 元素。
1
2
3
|
|
在上文的两个例子中, 如果当前的文件不包含ID为“result”的元素,那么.load()
方法将不被执行。
Request Method(请求方法)
默认使用 GET 方式 , 如果data参数提供一个对象,那么使用 POST 方式。
Loading Page Fragments(加载页面片段)
.load()
方法, 不像 $.get()
那样,允许我们使用在 url
中添加特定参数的特殊语法,来实现可以指定要插入哪一部分远程文档。如果 url
参数的字符串中包含一个或多个空格,那么第一个空格后面的内容,会被当成是 jQuery 的选择器,从而决定应该加载返回结果中的哪部分内容。(译者注:第一个空格后面是一个jQuery选择器,返回的内容中匹配改选择器的内容将被载人到页面中。)
我们可以修改上述例子中,只有#container的一部分被载人到文件中:
1
|
|
当这种方法执行, 它将检索 ajax/test.html
返回的页面内容,jQuery会获取ID为 container
元素的内容,并且插入到ID为 result
元素,而其他未被检索到的元素将被废弃。
jQuery使用浏览器的.innerHTML
属性去解析检索到的文档,并将其插入到当前文档中。在此过程中,浏览器通常会过滤文档中的一些元素 ,比如<html>
, <title>
, 或者 <head>
元素。其结果是,由.load()
方法返回的元素与从浏览器中直接获取到的文档内容,可能是并不完全一样的。
Script Execution(脚本执行)
当使用URL参数中没有后面跟选择器表达式时, 那么传递给 .html()
的返回内容中,是含有脚本的。在它们被丢弃之前,脚本是会被执行的。但如果调用 .load()
时,即使在 url 参数中添加了选择器表达式,但在 DOM 被更新之前,脚本会被删除。因此脚本不会被执行。下面的例子分别演示了这两种情况:
任何加载到 #a
中的 JavaScript 脚本,将会作为文档的一部分而被执行。
1
|
|
然而,在以下情况下,脚本块将从被加载到#b
的document中被剥离出来,而不执行:
1
|
|
Additional Notes:(其他注意事项:)
- 由于浏览器的安全限制,大多数“Ajax”的要求,均采用同源的政策 ;该请求不能成功地检索来自不同的域,子域或协议的数据。
例子:
Example: 在一个有序列表中,加载主页的页脚导航。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
|
Example: 显示一个信息如果Ajax请求遭遇一个错误
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
|
Example: 将feeds.html 文件载人到 ID为feeds的DIV.
1
|
|
Result:
1
|
|
Example: 发送数组形式的data参数到服务器。
1
|
|
Example: Same as above, but will POST the additional parameters to the server and a callback that is executed when the server is finished responding.
1
2
3
|
|
转载请注明:悠然品鉴 » jQuery .load() 用法 手册 | 示例代码