我希望 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()产生undefined、undefined和[object Object]。我究竟做错了什么?例子是活的here.
您需要更改这一行:
html = jQuery(result);
To this:
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">
is not其中之一,因为它实际上是one of包装器的选定元素,并且不能是其自身的后代。
通过将其包裹在<div>
自己的元素,然后将这些元素“降低”一个级别。你打电话时.find()
在我上面的固定代码中,它会查找该代码的后代<div>
因此找到你的<div id="a">
.
Comment
If your <div id="a">
不是顶级的,即:的直接子级<body>
,那么你的代码就可以工作了。对我来说,这是不一致的,因此是不正确的行为。为了解决这个问题,jQuery 应该生成容器<div>
对你来说,当它工作时<body>
内容提取魔法。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)