javascript - 相同结构的 jQuery AJAX XML

Question

我刚开始使用 XML，正在为一个项目测试它(我们不能使用 JSON，我们已经有必须使用的现有 XML)。

我的问题是我希望以与显示的结构完全相同的结构附加来自 XML 的数据。

<?xml version="1.0" encoding="UTF-8" ?>
<?xml-stylesheet type="text/xsl" href="../xsl/html.xsl" ?>
<htmldoc>
    <heading>
        Odyssey Heading HTML Test in XML.
    </heading>
    <para>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </para>
    <data>GBF79759</data>
    <para>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </para>
</htmldoc>

这是一些 XML 标记的简单示例(尽管现有的 XML 要复杂得多)，我将其用作示例是因为我混合了分开的标记(<para>'s & <data> 是这里的主要示例)。

我一直在网上查看，每个人都以非动态方式附加数据，挑选出元素并附加它们，我想做的是将 XML 文档中的每个标记作为 HTML 元素说明，然后附加一切。我还想知道这是否是 XSL 涵盖的内容？由于我对 XML/XSL 了解不多，因此非常感谢任何帮助。

这里是我当前测试JS的一个例子(非动态方式):

$.ajax({
    url: 'xml/' + data + '.xml',
    type: 'GET',
    dataType: 'xml'
}).done(function(xml) {
    console.log("success");
    $(xml).find('htmldoc').each(function() {
        var heading = $(this).find('heading').text(),
            para = $(this).find('para').text();

        $('#main > .content-wrapper > .container').append(
            // XML Structure
            $('<h3>' + heading + '</h3>'), $('<p>' + para + '</p>')
        );
    });
}).fail(function(jqXHR, textStatus, errorThrown) {
    console.log("error", jqXHR, textStatus, errorThrown);
}).always(function() {
    console.log("complete");
});

Answer 1

$( $.parseXML( xml ) ).find('htmldoc').each(function() {
    var heading = $(this).find('heading').text(),
        para = $(this).find('para').text();

    $('#main > .content-wrapper > .container').append(
        // XML Structure
        $('<h3>'+heading+'</h3>'), $('<p>'+para+'</p>')
    );
});

Fiddle