web-dev-qa-db-ja.com

jQuery AJAX requestから返されたHTMLの解析

私がやろうとしていることは簡単に思えます：[〜＃〜] html [〜＃〜]ページを$.ajax()から取得し、値を引き出しますそれ。

$(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 私はこれで遊んでいますが、それまでは動作していませんので、動作例を提供するために他にできることはほとんどありません。

UPDATE：私の 新しいフィドル は正常に機能していますが、実際のプロジェクトでは大きく複雑なHTMLを解析します。これは既知の問題ですか？

javascriptjqueryhtmlajax
21
Stephen Collins

コードは正常に機能します。 jsFiddleのAPIを正しく使用していないだけです。 /echo/html/のドキュメントを確認してください（ http://doc.jsfiddle.net/use/echo.html#html ）：

URL：/ echo/html /

データはPOST経由で提供する必要があります

したがって、POSTを使用するにはAJAX呼び出しを更新する必要があります。また、末尾のスラッシュが必要です。

$(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/

18
Rocket Hazmat

解析したい場合、jqueryには気の利いたトリックがあります:)

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

これで、ドキュメントの本文に配置せずに横断できるDOM要素ができました。

6
Anthony Iacono

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());
3
Rizwan Mumtaz

Loadメソッドを使用しないのはなぜですか？

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

または、ここでフィドルを修正して動作させます：

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

2
dave

すべての答えは実際の問題を指しているのではなく、jQueryはheadタグとbodyタグを無視しているようで、ノードの配列を作成します。通常必要なのは、ボディを抽出して解析することです。

この役立つ答えを見てください、私は彼の作品をコピーしたくありません： https://stackoverflow.com/a/12848798/2590616 。

1
RiZKiT

私は同じ問題を抱えており、リクエストされたhtmlコードを1つのコンテナ要素にカプセル化することを修正しました。

悪い例：

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

単一の要素ツリーを変換したいので、jqueryはこれを要素に変換できませんでした。しかし、それらにはコンテナがありません。次の例が機能するはずです。

正しい例：

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

私は同じ問題に直面していますが、それはあなたが何か間違ったことをしているからではありません。

これは、「link」タグがinnerHTMLを返すことを想定していないためです。jqueryで明示的に除外されているため、次の行にあることがわかります。

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

HTMLのこのタグは、外部スタイルシートにリンクすることになっています。

0
ZMs