解析从 jQuery AJAX 请求返回的 HTML答案

【问题标题】：Parsing returned HTML from jQuery AJAX request解析从 jQuery AJAX 请求返回的 HTML
【发布时间】：2013-11-29 05:43:05
【问题描述】：

我要做的似乎很简单：通过$.ajax() 获取一个HTML 页面并从中提取一个值。

$(function () {
    $.ajax({
        url: "/echo/html",
        dataType: "html",
        success: function (data) {
            $('#data').text(data);
            $('#wtf').html($(data).find('#link').text());
        },
        data: {
            html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
        }
    });
});

问题是 jQuery 拒绝解析返回的 HTML。

我正在使用的 fiddle 目前无法正常工作，因此我无法提供其他工作示例。

更新：我的new fiddle 工作正常，但问题似乎是在我的实际项目中，我试图解析大量复杂的 HTML。这是一个已知问题吗？

【问题讨论】：

在 jsFiddle 上使用 /echo/html/ 时需要使用 POST（也请注意尾部斜杠）。 jsfiddle.net/hcrM8/6

标签： javascript jquery html ajax

【解决方案1】：

您的代码运行良好。您只是没有正确使用 jsFiddle 的 API。查看/echo/html/ (http://doc.jsfiddle.net/use/echo.html#html) 的文档：

网址：/echo/html/

必须通过 POST 提供数据

因此，您需要更新 AJAX 调用以使用 POST。还需要尾部斜杠。

$(function () {
    $.ajax({
        url: "/echo/html/",
        type: "post",
        dataType: "html",
        success: function (data) {
            $('#data').text(data);
            $('#wtf').html($(data).find('#link').text());
        },
        data: {
            html: '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a id="link">content<\/a><\/li><\/ul><\/body><\/html>'
        }
    });
});

演示：http://jsfiddle.net/hcrM8/6/

【讨论】：

那么问题一定出在我在项目中获取的实际 HTML 中。它非常大而且非常复杂。问题是，如果 jQuery 可以解析页面中存在的页面，为什么它不能解析 AJAX 请求返回的页面呢？
@wtfsven：你的真实页面会发生什么？你看到了什么？有什么错误吗？在执行$(data) 时，jQuery 会去掉<html>、<head> 和<body> 标记。你的 jQuery 对象看起来像：[<title>, <link>, <ul>]。您真实页面上的 HTML 是否有效？您可能还需要 .filter 与 .find，具体取决于其结构。
好的，事实证明，由于某种原因，jQuery 正在寻找一个 iframe（这就是我要选择的），而不是另一个。我仍在研究它，但它似乎暂时有效。
它很旧，但我发表评论是因为它是投票最多的答案，希望问题在这里得到解决：stackoverflow.com/a/12848798/2590616
@RocketHazmat - .filter vs .find 是我所需要的。你不知道你不知道什么。谢了哥们！ :)

【解决方案2】：

如果你想解析它，jquery 有一个绝妙的技巧:)

 ParsedElements = $(htmlToParse);
 Console.log(ParsedElements);

您现在有了DOM 元素，您无需将它们放在文档正文中即可遍历它们。

【讨论】：

但这就是问题所在。它根本不解析 HTML。 $('#wtf').html($(data).find('#link').text()); 应该返回“内容”，但它表示 text() 未定义。

【解决方案3】：

jQuery.parseHTML()

http://api.jquery.com/jQuery.parseHTML/

str = "hello, <b>my name is</b> jQuery.",
  html = $.parseHTML( str ),
  nodeNames = [];

// Gather the parsed HTML's node names
$.each( html, function( i, el ) {
  nodeNames[ i ] = "<li>" + el.nodeName + "</li>";
});

小提琴上的 ajax 出了点问题

http://jsfiddle.net/hcrM8/5/

var html= '<!DOCTYPE html><head><title><\/title><link href="../css/popup.css" rel="stylesheet" /><\/head><body><ul><li><a class="disabled" id="link">content<\/a><\/li><\/ul><\/body><\/html>';
            h = $.parseHTML(html);
            $('#data').text(h);
            $('#wtf').html($(h).find('#link').text());

【讨论】：

这将返回一个元素数组。我需要一个可以使用选择器的 jQuery 对象。（你的小提琴返回 null）

【解决方案4】：

为什么不直接使用 load 方法呢？

$( "#wtf" ).load( "/echo/html #link" );

或者，这是你的小提琴修复和工作：

http://jsfiddle.net/hcrM8/4/

【讨论】：

因为这不是我在我的项目中所做的。我伸手去抓一个页面，从中提取一些数据，然后把它扔掉。

【解决方案5】：

我遇到了同样的问题，我修复了将请求的 html 代码封装到一个容器元素中的问题。

不好的例子：

<a href="link">Linkname</a>
<p>Hello world</p>

Jquery 无法将此转换为元素，因为它希望转换单个元素树。但那些没有容器。以下示例应该可以工作：

正确的例子：

<div>
    <a href="link">Linkname</a>
    <p>Hello world</p>
</div>

【讨论】：

【解决方案6】：

我也面临同样的问题，并不是因为你做错了什么。

这是因为“link”标签不应该返回任何innerHTML，它在jquery中被明确排除，你会在这一行找到一些：

rnoInnerhtml = /<(?:script|style|link)/i,

HTML 中的这个标签应该链接到外部样式表。

【讨论】：

【解决方案7】：

所有答案都没有指向真正的问题，jQuery 似乎忽略了 head 和 body 标记并创建了一个节点数组。您通常想要的是，提取正文并解析它。

看看这个有用的答案，我不想复制他的工作：https://stackoverflow.com/a/12848798/2590616。

【讨论】：