定义和用法
load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。
注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数。
语法
load(url,data,function(response,status,xhr))
参数 | 描述 |
---|---|
url | 规定要将请求发送到哪个 URL。 |
data | 可选。规定连同请求发送到服务器的数据。 |
function(response,xhr) | 可选。规定当请求完成时运行的函数。 额外的参数:
|
详细说明
它几乎与 $.get(url,data,success) 等价,不同的是它不是全局函数,并且它拥有隐式的回调函数。
当侦测到成功的响应时(比如,当 textStatus 为 "success" 或 "notmodified" 时),.load() 将匹配元素的 HTML 内容设置为返回的数据。
这意味着该方法的大多数使用会非常简单:
$("#result").load("ajax/test.html");
如果提供回调函数,则会在执行 post-processing 之后执行该函数:
$("#result").load("ajax/test.html",function() { alert("Load was performed."); });
上面的两个例子中,如果当前文档不包含 "result" ID,则不会执行 .load() 方法。
加载页面片段
.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。
这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。
我们可以修改上面的例子,这样就可以使用所获得文档的某部分:
$("#result").load("ajax/test.html #container");
如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。
该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。
<script > $(function(){ $("a").click(function(){ var url = this.href+" h2 a";//注意,h2前面有空格,这是url特殊语法 var args = {"time":new Date()}; $("#details").load(url,args,function(response,status){ if(status == "success"){ alert(response); } } ); return false; }); }) </script>以下为JSP页面:
<body> <h1>People</h1> <ul> <li> <a href="files/andy.html">Andy</a> </li> <li> <a href="files/richard.html">Richard</a> </li> <li> <a href="files/jeremy.html">Jeremy</a> </li> </ul> <div id="details"></div> </body>
jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>,<title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。
注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。