获得另一页的分区使用jQuery的Ajax内容 [英] Get the content of another page's div with jQuery Ajax
问题描述
我想page.html即可将Ajax请求side.html的内容，并提取其两个div的内容。但我找不到解析响应的正确方法，尽管一切我试过了。
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.
下面是side.html：
Here is 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即可
and here is 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.
推荐答案
您需要改变这一行：
html = jQuery(result);
要这样：
html = jQuery('<div>').html(result);
而实际上，甚至更好，你应该把这个声明为一个局部变量：
And actually, even better you should declare this as a local variable:
var html = jQuery('<div>').html(result);
说明
当你这样做 jQuery的（结果），jQuery的拉的孩子＆LT;身体GT; 元素，并返回围绕这些元素的包装，而不是返回一个jQuery包装的＆LT; HTML＆GT; 元素，我倾向于同意将pretty的哑
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.
在你的情况下，＆LT;身体GT; sidebar.html的包含多个元素和一些文本节点。因此返回的jQuery对象是一个包装的几个元素和文本节点。
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.
在使用 .find（），它搜索包裹您在调用它的jQuery对象的元素的的后裔的。在你的情况下，＆LT; DIV ID =A＆GT; 是没有的其中的一个，因为它实际上的之一的包装物的选择的元素，并且不能自身的后裔。
When you use .find(), it searches the descendants of the elements wrapped by the jQuery object that you call it on. In your case, the <div id="a"> is not one of these because it is actually one of the selected elements of the wrapper, and cannot be a descendant of itself.
通过包装在一个＆LT; DIV＆GT;你自己的，然后你把这些元素下的水平。当你调用 .find（）在我的固定的code以上，它看起来对继承者＆LT; DIV＆GT; 并因此发现你的＆LT; DIV ID =A＆GT;
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">.
注释
如果你的＆LT; DIV ID =A＆GT; 是不是在最顶层，也就是＆LT的直接子;身体GT ; ，那么你的code会起作用。对我来说这是不一致的，所以不正确的行为。为了解决这个问题，jQuery的应生成容器＆LT; DIV＆GT; 对你来说，这是工作时的＆LT;身体GT; 内容提取法宝。
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.
这篇关于获得另一页的分区使用jQuery的Ajax内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
