解析從jQuery AJAX請求返回的HTML

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。

我正在玩這個小提琴並不是在平時工作，所以我無能為力提供一個有效的例子。

更新：我的新小提琴工作正常，但似乎問題是，在我的實際項目中，我正在嘗試解析大量復雜的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>'
        }
    });
});

演示： 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

我面臨着同樣的問題，並不是因為你做錯了什么。

這是因為“link”標簽不應該返回任何innerHTML，它在jquery中被明確排除，你會發現這一行的某些地方：

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

HTML中的此標記應該鏈接到外部樣式表。

解析從jQuery AJAX請求返回的HTML

問題描述

7 個解決方案

解決方案1
18 已采納 2013-11-15 18:40:30

解決方案2
6 2013-11-15 18:12:15

解決方案3
3 2013-11-15 18:25:54

解決方案4
2 2013-11-15 18:11:49

解決方案5
1 2016-05-27 13:42:19

解決方案6
1 2018-01-12 14:42:49

解決方案7
0 2014-12-02 15:54:46

解析從jQuery AJAX請求返回的HTML

問題描述

7 個解決方案

解決方案1 18 已采納 2013-11-15 18:40:30

解決方案2 6 2013-11-15 18:12:15

解決方案3 3 2013-11-15 18:25:54

解決方案4 2 2013-11-15 18:11:49

解決方案5 1 2016-05-27 13:42:19

解決方案6 1 2018-01-12 14:42:49

解決方案7 0 2014-12-02 15:54:46

解決方案1
18 已采納 2013-11-15 18:40:30

解決方案2
6 2013-11-15 18:12:15

解決方案3
3 2013-11-15 18:25:54

解決方案4
2 2013-11-15 18:11:49

解決方案5
1 2016-05-27 13:42:19

解決方案6
1 2018-01-12 14:42:49

解決方案7
0 2014-12-02 15:54:46