Question

我正在尝试做的事情似乎很简单：通过$.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。这是一个已知的问题吗？

Answer 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>'
        }
    });
});

DEMO：http://jsfiddle.net/hcrM8/6/

Answer 2

如果你想解析它， jquery 有一个很好的技巧：）

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

您现在可以遍历DOM个元素，而无需将它们放在文档正文中。

Answer 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());

Answer 4

为什么不直接使用加载方法？

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

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

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

Answer 5

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

错误示例：

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

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

右边示例：

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

Answer 6

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

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

Answer 7

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

它是因为＆＃34;链接＆＃34; tag不应该返回任何innerHTML，它在jquery中被明确排除，你会在这一行找到一些：

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

HTML中的此标记应链接到外部样式表。

解析从jQuery AJAX请求返回的HTML

7 个答案: