JQuery 的 ajax 函数从 XML 中剥离 HTML 标签

Question

好的，我正在从 XML 文件中提取数据以动态填充我的网页元素。 我的问题是，当我使用 JQuery .ajax 来提取 xml 文件时，它会去除我的 HTML 标签。

例如，

XML 文件中的数据：

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

网页上所需的输出：

<p>Hello, world</p>

实际输出：

Hello World

这是我的 ajax 函数中的代码：

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

我尝试使用 JQuery 的 '.html()' 但它返回 null。 我可以解决这个问题的最简单方法是什么？ 最好不要改变太多我已经做过的事情。

提前致谢。

Answer 1

使用text将根据您的经验剥离标签。 您可以改为使用转录节点上的 jQuery children方法（参考）来获取 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 。 重置样式可能是解决此问题的一种方法。 一种更正确且可能更简单的方法是将 HTML 内容放在 XML 中的 CDATA 内，正如其他评论者之一所建议的那样。

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。