1

さて、XML ファイルからデータを取得して、Web ページの要素を動的に設定しています。私の問題は、JQuery .ajax を使用して xml ファイルをプルすると、HTML タグが削除されることです。

例えば、

XML ファイルのデータ:

<transcript><p>Hello, world</p></transcript>

Web ページでの望ましい出力: 

<p>Hello, world</p>

実際の出力:

Hello World

これが私のajax関数内の私のコードです:

$(xmlData).find('item').each(function() {
        var n = $(this).find('transcript').text();

JQuery の '.html()' を使用しようとしましたが、null が返されます。これを修正できる最も簡単な方法は何ですか? できれば、私がすでに行ったことをあまり変更しないでください。

前もって感謝します。

4

1 に答える 1

6

を使用textすると、経験したようにタグが削除されます。代わりに、transcript ノードでjQuerychildrenメソッド (参照) を使用して、HTML を取得できます。これが実際の例です: http://jsfiddle.net/gjwyd/

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        dataType: "xml",
        data: {
            xml: "<transcript><p>Hello, world</p></transcript>"
        },
        success: function(xml) {
            var container = $('#content');
            var html = $(xml).find('transcript').children();
            container.html(html);
        }
    });
});​

キーは次の行です。

var html = $(xml).find('transcript').children();

そして、必ずdateTypeをxmlとして設定してください。

問題

XML 応答から HTML を取得する場合、デフォルトのスタイルが欠落している可能性があります。たとえば、段落タグには がない場合がありますdisplay: block。スタイルをリセットすることは、この問題を回避する 1 つの方法である可能性があります。より正確でおそらく簡単な方法は、他のコメント投稿者の 1 人が提案したように、XML 内の CDATA 内に HTML コンテンツを配置することです。

http://jsfiddle.net/tZJQp/

$(document).ready(function() {
    $.ajax({
        type: "POST",
        url: "/echo/xml/",
        dataType: "xml",
        data: {
            xml: "<transcript><![CDATA[<p>Hello, world</p><p>Bye</p>]]></transcript>"
        },
        success: function(xml) {
            var container = $('#content');
            var html = $(xml).find('transcript').text();
            container.html(html);
        }
    });
});

他の人が指摘しているようhtmlに、XMLでは機能しません。

于 2012-12-03T18:53:21.910 に答える