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

时间:2012-12-03 18:41:43

标签: javascript jquery html xml ajax

好的,我正在从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。什么是最简单的方式我可以解决这个问题?最好不要改变我已经做过的太多。

提前致谢。

1 个答案:

答案 0 :(得分:6)

使用text会根据您的经历去除标记。您可以在脚本节点上使用jQuery children方法(reference)来获取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中作为其他评论者之一建议的。

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。