简单的jQuery ajax示例在返回的HTML中找不到元素 [英] Simple jQuery ajax example not finding elements in returned HTML
问题描述
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0严格// EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmllang =enxml：lang =en>
< head>
< title> runthis< / title>
< script type =text / javascriptlanguage =javascriptsrc =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）; / /显示整个dom
alert（$（data）.find（'＃wrapper'）。html（））; //返回null
}，
错误：function（）{
alert（对不起，找不到请求的属性）;
}
}）;
}）;
} ）;
< / script
< / head>
< body>
< input type =buttonvalue =load/>
< / body>
< / html>
哪些加载此页面ajaxtest-load.html：
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0严格// EN
http://www.w3.org /TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtmllang =enxml：lang =en>
< head>
< title>加载此< / title>
< / head>
< body>
< div id =wrapper>
test
< / div>
< / body>
< / html>
它提供两个警报。显示DOM的一个文件已加载，但第二个显示为NULL而不是#wrapper。我究竟做错了什么？
编辑：我正在加载ajaxtest-load.html，其中包括整个标题，包括jquery。这是问题吗？
我已经设法从完整的html文档中加载片段，只需使用 .load（）。
要创建一个带有提取的html的新块到DOM中，我这样做：
$（'< div>< / div>'）。appendTo（'body'）load（'some-other-document。 html div＃contents'）;
如果不适合您，请确保使用最新版本（或发布1.2 ）的jQuery。有关更多示例，请参阅 .load文档。
编辑：
但是，注意，上述示例的结果将是：
< div>< div id =contents> ...< / div>< / div>
要获取另一个文档中#contents div的内容，请使用回调函数加载函数调用。
$（'< div>< / div> other-document.html div＃contents'，null，
function（responseText，textStatus，XMLHttpRequest）{
if（textStatus == success）{
$（'< div> / div>'）。appendTo（'body'）。html（$（this）.html（））;
}
}
）;
I'm trying to learn jQuery's ajax functions. I've got it working, but jQuery doesn't find elements in the returned HTML DOM. In the same folder as jquery, run this page:
<!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>
Which loads this page "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>
It gives two alerts. One showing the DOM was loaded, but the second shows NULL instead of the #wrapper. What am I doing wrong?
EDIT: I'm loading "ajaxtest-load.html" which includes the whole header, including jquery again. Is that the issue?
I've managed to load snippets off of full html-documents just fine by using .load().
To create a new block with extracted html into the DOM I do this:
$('<div></div>').appendTo('body').load('some-other-document.html div#contents');
If it's not working for you, make sure you're using the most recent version (or post 1.2) of jQuery. See the documentation for .load for more examples.
Edit:
Note, though, that with the above example the result will be:
<div><div id="contents">...</div></div>
To get just the contents of the #contents div in the other document, use a callback-function in the load-function call.
$('<div></div>').load('some-other-document.html div#contents', null,
function (responseText, textStatus, XMLHttpRequest) {
if (textStatus == success) {
$('<div></div>').appendTo('body').html($(this).html());
}
}
);
这篇关于简单的jQuery ajax示例在返回的HTML中找不到元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
