如何从ajax过滤返回数据的正文html?

时间:2013-01-08 00:28:57

标签: javascript jquery jqxhr

我的目的是,我想从数据中取出特定的html并仅更新该区域。

How do I filter the returned data from jQuery.ajax?

此链接是一个旧帖子,但我确实有完全相同的问题。

来自链接的解决方案是$("[ref=B]").html(data).find( '[ref=A]' );

但是,如果我这样做,整个页面将首先在<span ref='B'>上写,然后在其中找到选择器.....

只能找到&#39; [ref = A]&#39;是

html = $(data).filter('[ref=B]').find('[ref=A]').html() // this way will work

这些都不会起作用

$(data).find('[ref=A]').html();
$(data).filter('[ref=A]').html();
$(data).filter('body').html();
$(data).find('body').html();

HTML

`<body>

<span ref='B'><span ref='A'>abc</span></span>

</body>`

JS

 $(function() {
$.get(window.location.pathname + window.location.search, function(data){ alert(data);});
 });

返回数据

<html>
<body>
    <span ref='B'><span ref='A'>abc</span></span>
</body>
</html>

我的问题是,是否有解决方案从$ .ajax返回的数据中过滤body的html?像

body_html = $(data).??????? 

然后我可以做任何我想做的事,比如

body_html.find('xxxx');

非常感谢你的建议。

2 个答案:

答案 0 :(得分:4)

您可以使用DocumentFragment来模拟您的HTML并进行搜索,而无需将其附加到DOM

// Create your DocumentFragment to be able to work without DOM
var body_html = document.createDocumentFragment();

// Convert and append data from your jQuery to work with fragment
body_html.appendChild($(data)[0]);

// Now you can select using your jQuery
var $body_html = $(body_html);

// Now you can use the find or whatever you want, like if it was in the DOM
$body_html.find('.foo');

// Or you can append in your current document, 
// but attention, after it the fragment reference is erased
$body_html.appendTo(document.body); 
// now you need to get reference again from body, 
// because your fragment doesn't exists anymore.

// So... if you try:
console.log(body_html); // undefined
console.log($body_html); // jquery over undefined, probably just a jquery useless

// At this point you will need to reference from DOM to continue manipulation
$body_html = $(document.body);
// Now I'm ready to continue the work
// This var is like your DocumentFragment, but already on DOM.

你也可以在jQuery模板$(data).filter('.foo')中进行过滤,但正如你在 tests 中看到的那样,你的表现会下降很多。

答案 1 :(得分:2)

$("[ref=B]").append($(data).find("[ref=A]"));

你在问题​​中这样做,最后一部分find( '[ref=A]' )是没用的。

[编辑]另外,另一个问题是2岁以上。对于最新版本的jQuery,您可能需要其他引号:

$("[ref='B']").append($(data).find("[ref='A']"));