JAVA、PHP、前端、APP、网站开发 - 开发技术学习

开发技术学习 » 前端设计 » Jquery加载load学习

Jquery加载load学习

此文被围观2658日期: 2012-05-28 分类 : 前端设计  标签:  ·····

load() 方法通过 AJAX 请求从服务器加载数据,并把返回的数据放置到指定的元素中。

注释:还存在一个名为 load 的 jQuery 事件方法。调用哪个,取决于参数

详细说明

该方法是最简单的从服务器获取数据的方法。它几乎与 $.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() 方法。

如果提供的数据是对象,则使用 POST 方法;否则使用 GET 方法。
加载页面片段

.load() 方法,与 $.get() 不同,允许我们规定要插入的远程文档的某个部分。这一点是通过 url 参数的特殊语法实现的。如果该字符串中包含一个或多个空格,紧接第一个空格的字符串则是决定所加载内容的 jQuery 选择器。

我们可以修改上面的例子,这样就可以使用所获得文档的某部分:

$(“#result”).load(“ajax/test.html #container”);

如果执行该方法,则会取回 ajax/test.html 的内容,不过然后,jQuery 会解析被返回的文档,来查找带有容器 ID 的元素。该元素,连同其内容,会被插入带有结果 ID 的元素中,所取回文档的其余部分会被丢弃。

jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档,并把它插入当前文档。在此过程中,浏览器常会从文档中过滤掉元素,比如 <html>, <title> 或 <head> 元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。

注释:由于浏览器安全方面的限制,大多数 “Ajax” 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。

<html>
<head>
<script type=”text/javascript” src=”/jquery/jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“button”).click(function(){
$(“div”).load(“/example/xmle/cd_catalog.xml”,function(response,status,xhr){
if (status==”success”)
{
$(“div”).html(“<ol></ol>”);
$(response).find(“artist”).each(function(){
var item_text = $(this).text();
$(‘<li></li>’).html(item_text).appendTo(‘ol’);
});
}
else
{
$(“div”).html(“An error occured: <br/>” + xhr.status + ” ” + xhr.statusText)
}
});
});
});
</script>
</head>
<body>
<p>Artists</p>
<div></div>
<button>获得 CD 信息</button>
<p>本例中使用的 XML 文件是 <a href=”/example/xmle/cd_catalog.xml” target=”_blank”>cd_catalog</a></p>
</body>
</html>

或<head>元素。结果是,由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。 注释:由于浏览器安全方面的限制,大多数 "Ajax" 请求遵守同源策略;请求无法从不同的域、子域或协议成功地取回数据。<html><head><div type="text/javascript" src="/jquery/jquery.js" cdata_tag="script" style="display:none"></div><div type="text/javascript" cdata_tag="script" style="display:none">$(document).ready(function(){ $("button").click(function(){ $("div").load("/example/xmle/cd_catalog.xml",function(response,status,xhr){ if (status=="success") { $("div").html("<ol></ol>"); $(response).find("artist").each(function(){ var item_text = $(this).text(); $('<li></li>').html(item_text).appendTo('ol'); }); } else { $("div").html("An error occured: <br/>" + xhr.status + " " + xhr.statusText) } }); }); });</div></head><body><p>Artists</p><button>获得 CD 信息</button><p>本例中使用的 XML 文件是 <a href="/example/xmle/cd_catalog.xml" target="_blank" _href="/example/xmle/cd_catalog.xml">cd_catalog</a></p></body></html></head>

站点声明:部分内容源自互联网,为传播信息之用,如有侵权,请联系我们删除。

© Copyright 2011-2024 www.kfju.com. All Rights Reserved.
超级字帖 版权所有。蜀ICP备12031064号