jQuery AJAX XML具有相同的結構

我不熟悉使用XML並且正在測試它的項目（我們不能使用JSON，我們已經有了必須使用的現有XML）。jQuery AJAX 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"); 
});

來源

2016-01-11 Joe Methven

你的意思是你想直接追加所有的XML從裏面' '元素到你的頁面？ –

你好，這正是我想要的，從字面上追加確切的結構，而不是櫻桃挑選它的某些部分。 –

XSLT在這方面做得很好，您可以爲每個輸入元素類型創建一個模板，創建相應的HTML結果元素，請參閱http://xsltransform.net/6r5Gh3x一個簡單的例子，它很容易適應您可以添加更多的模板，只需要確保使用''繼續遞歸處理。 –

$($.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

來源

2016-01-11 08:46:17 dann

對不起，你能總結一下，這與我目前的版本有何不同？在你的小提琴上，它仍然附加指定的內容，而不是XML中的所有內容，而不是「櫻桃樹」。 –

jQuery AJAX XML具有相同的結構

回答

相關問題