Javascript 使用 jQuery Ajax 获取另一个页面 div 的内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14683736/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get the content of another page's div with jQuery Ajax
提问by Nown
I would like page.html to ajax-request the content of side.html and extract the content of two of its divs. But I cannot find the correct way to parse the response, despite everything I tried.
我希望 page.html 对 side.html 的内容进行 ajax 请求并提取其两个 div 的内容。但是，尽管我尝试了所有方法，但我还是找不到解析响应的正确方法。
Here is side.html:
这是side.html：
<!DOCTYPE html>
<html>
<head>
<title>Useless</title>
</head>
<body>
<div id="a">ContentA</div>
<div id="b">ContentB</div>
</body>
</html>
and here is page.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>
When I access this page, I get no error, and the three alert()s yield undefined, undefined and [object Object]. What am I doing wrong? Example is live here.
当我访问这个页面时，我没有得到任何错误，三个 alert() 产生 undefined、undefined 和 [object Object]。我究竟做错了什么？例子是在这里住。
回答by leftclickben
You need to change this line:
您需要更改此行：
html = jQuery(result);
To this:
对此：
html = jQuery('<div>').html(result);
And actually, even better you should declare this as a local variable:
实际上，更好的是您应该将其声明为局部变量：
var html = jQuery('<div>').html(result);
Explanation
解释
When you do jQuery(result), jQuery pulls the children of the <body>element and returns a wrapper around those elements, as opposed to returning a jQuery wrapper for the <html>element, which I tend to agree would be pretty dumb.
当你这样做时jQuery(result)，jQuery 拉取<body>元素的子元素并返回这些元素的包装器，而不是返回元素的 jQuery 包装器<html>，我倾向于同意这会非常愚蠢。
In your case, the <body>of sidebar.html contains several elements and some text nodes. Therefore the jQuery object that is returned is a wrapper for those several elements and text nodes.
在您的情况下，<body>sidebar.html 包含几个元素和一些文本节点。因此，返回的 jQuery 对象是这几个元素和文本节点的包装器。
When you use .find(), it searches the descendantsof the elements wrapped by the jQuery object that you call it on. In your case, the <div id="a">is notone of these because it is actually one ofthe selected elements of the wrapper, and cannot be a descendant of itself.
当您使用 时.find()，它会搜索由您调用它的 jQuery 对象包装的元素的后代。在你的情况下，<div id="a">是不是其中之一，因为它实际上是一个包装的选择的元素，并且不能是其自身的后代。
By wrapping it in a <div>of your own, then you push those elements "down" a level. When you call .find()in my fixed code above, it looks for descendants of that <div>and therefore finds your <div id="a">.
通过将它包装在<div>您自己的a中，然后您将这些元素“下”了一个级别。当你调用.find()我上面的固定代码时，它会寻找它的后代，<div>因此找到你的<div id="a">.
Comment
评论
If your <div id="a">was not at the top level, i.e. an immediate child of the <body>, then your code would have worked. To me this is inconsistent and therefore incorrect behaviour. To solve this, jQuery should generate the container <div>for you, when it is working its <body>content extraction magic.
如果您<div id="a">不在顶层，即 的直接子级<body>，那么您的代码就可以工作。对我来说，这是不一致的，因此是不正确的行为。为了解决这个问题，jQuery 应该<div>为您生成容器，当它发挥其<body>内容提取魔法时。
回答by Fedir RYKHTIK
Try this :
尝试这个 ：
$.get(url,function(content) {
var content = $(content).find('div.contentWrapper').html();
...
}
