use*_*218 11 ajax jquery parsing dom
我正在尝试学习jQuery的ajax函数.我有它的工作,但jQuery没有在返回的HTML DOM中找到元素.在与jquery相同的文件夹中,运行此页面:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>runthis</title>
<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>
<script tyle="text/javascript">
$(document).ready(function(){
$('input').click(function(){
$.ajax({
type : "GET",
url : 'ajaxtest-load.html',
dataType : "html",
success: function(data) {
alert( data ); // shows whole dom
alert( $(data).find('#wrapper').html() ); // returns null
},
error : function() {
alert("Sorry, The requested property could not be found.");
}
});
});
});
</script
</head>
<body>
<input type="button" value="load" />
</body>
</html>
加载此页面"ajaxtest-load.html":
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>load this</title>
</head>
<body>
<div id="wrapper">
test
</div>
</body>
</html>
它提供两个警报.一个显示DOM已加载,但第二个显示NULL而不是#wrapper.我究竟做错了什么？
编辑:我正在加载"ajaxtest-load.html",其中包括整个标题,包括jquery.这是问题吗？
这不是一个直接的答案,但可能有助于澄清事情.
回调函数的数据参数可以制作成jQuery(1.6.2)对象$(data),其中包含HTML响应的不同部分:
html,head和body元素不在数据对象中.由于头部和身体中包含的元素数量可能会有所不同,因此您不应通过像$(data)[2]这样的索引来获取它们.而是将过滤器应用于此对象,如下所示:
$.get(
uri,
function(data, textStatus, jqXHR){
var $doc = $(data);
var title = $doc.filter('title').text();
// title is the title from the head element.
// Do whatever you need to do here.
}
);
过滤右侧元素后,您可以使用find()应用更多选择器.
不幸的是,在IE中头元素不是$(数据)的一部分.我不知道为什么会这样.
我已经设法通过使用完全加载完整的html文档的片段.load().
要在DOM中创建一个带有提取的html的新块,我这样做:
$('<div></div>').appendTo('body').load('some-other-document.html div#contents');
如果它不适合您,请确保您使用的是jQuery的最新版本(或1.2版本).有关更多示例,请参阅.load的文档.
编辑:
但请注意,使用上面的示例,结果将是:
<div><div id="contents">...</div></div>
要仅获取其他文档中#contents div的内容,请在load-function调用中使用callback-function.
$('<div></div>').load('some-other-document.html div#contents', null,
function (responseText, textStatus, XMLHttpRequest) {
if (textStatus == success) {
$('<div></div>').appendTo('body').html($(this).html());
}
}
);