相同结构的 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