Now*_*own 8 javascript ajax jquery
我想page.html到ajax请求side.html的内容并提取其两个div的内容.但是我无法找到解析响应的正确方法,尽管我尝试了一切.
这是side.html:
<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
</head>
<body>
<div id="a">ContentA</div>
<div id="b">ContentB</div>
</body>
</html>
这是page.html
<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
<script type='text/javascript' src='jquery-1.9.0.min.js'></script>
</head>
<body>
Hello
<script type="text/javascript">
jQuery.ajax({
url: "side.html",
success: function(result) {
html = jQuery(result);
alert(html.find("div#a").attr("id"));
alert(html.find("div#a").html());
alert(html.find("div#a"));
},
});
</script>
</body>
</html>
当我访问这个页面时,我没有得到任何错误,并且三个alert()s产生undefined,undefined和[object Object].我究竟做错了什么？例子就在这里.
lef*_*ben 16
您需要更改此行:
html = jQuery(result);
对此:
html = jQuery('<div>').html(result);
实际上,你应该将它声明为局部变量:
var html = jQuery('<div>').html(result);
说明
当你这样做时jQuery(result),jQuery会拉出<body>元素的子元素并返回这些元素周围的包装器,而不是为元素返回一个jQuery包装器<html>,我倾向于认为它非常愚蠢.
在您的情况下,<body>sidebar.html包含几个元素和一些文本节点.因此,返回的jQuery对象是这些元素和文本节点的包装器.
使用时.find(),它会搜索由您调用它的jQuery对象包装的元素的后代.在你的情况下,<div id="a">是不是其中之一,因为它实际上是一个包装的选择的元素,并且不能是其自身的后代.
通过将它包装在<div>您自己的中,然后将这些元素"向下"推到一个级别.当您使用.find()上面的固定代码调用时,它会查找该代码的后代,<div>从而找到您的代码<div id="a">.
评论
如果你<div id="a">不是顶级的,即直接的孩子<body>,那么你的代码就可以了.对我来说,这是不一致的,因此行为不正确.要解决这个问题,jQuery应该<div>为它生成容器,当它正在处理它的<body>内容提取魔术时.