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>')
    );
});

小提琴