Question

我有一个使用jQuery的ajax函数，它定义了一个要调用的错误函数。当服务器上发生错误时，此错误函数将运行。 “jqXHR”中传递的变量之一包含一个名为responseText的属性。我想将此响应文本转储到页面上的div中，但响应文本包含完整格式的HTML文档。有没有办法使用jQuery来遍历这个包含HTML的变量，就像我遍历常规DOM一样？

$.ajax({
    blah blah blah...,
    error: function (jqXHR, textStatus, errorThrown)
    {
        var errorText = $(jqXHR.responseText).find('body').html();
        // The above line does not work. errorText is NULL.
        $('#mainContent').html(errorText);
    }
});

我想做上面代码片段之类的事情，但我这样做的方式不起作用。有没有办法遍历这个变量，好像它是一个我可以用jQuery导航的DOM？

更新

这是console.log($(jqXHR.responseText))

http://www.codetunnel.com/content/images/consolelog.jpg

Answer 1

对我来说也有一些甜蜜的发现。

这不起作用，因为在幕后，jQuery正在创建一个文档片段并在其上设置innerHtml属性。此对<html>和<body>节点不起作用，因为它们不是文档节点类型 - 它们不能放入DOM中。

相反，当您致电$('<html><body><b>foo</b></body></html>')时，会在其中创建一个仅包含“<b>foo</b>”的片段！所以，你只想要身体部位？回来：

$(jqXHR.responseText).html();

小提琴来证明我所指的是：http://jsfiddle.net/L5PR5/1/

编辑＃2

我认为，鉴于<head>元素被放在那里，你唯一的选择就是使用子串：

var res = jqXHR.responseText;
$(res.substring(res.indexOf('<body'))).appendTo('#mainContent');

Answer 2

试试这个：

var errorText = $('<div />').append(jqXHR.responseText).html();

这是一个jsfiddle。

Answer 3

使用.filter()

http://api.jquery.com/filter/

var myHtml = '<div id="blah">hello world</div>';
console.log($(myHtml).filter('#blah').html());

这将在控制台中显示“hello world”。它是存储在变量中的HTML。您将jquery中的filter（）应用于该变量（参见上文），即使它位于变量中，您也可以通过该方式访问dom。

Answer 4

假设您的html是有效的xml，您可以

var xmlDoc = $.parseXML( jqXHR.responseText ),
    body = $( xmlDoc ).find('body')[0],
    bodystring = body.xml || new XMLSerializer().serializeToString(body);

现在bodystring包含整个<body>标记（作为字符串），您可以使用它将其附加到DOM中

$('#mainContent').html( bodystring );

演示http://jsfiddle.net/gaby/hYukn/

使用jQuery选择变量中的内容而不是当前DOM中的内容？

更新

4 个答案: