Jquery解析XML

Question

我想使用JQuery閱讀以下XML。 jQuery的應該讀取XML並顯示在HTML以下，以下所有應掛

News 
Articles 
    ---Destinations 
    ---Epics 
Tuesday Night Bouldering 

我的XML看起來像下面...

<category> 
    <catId>96</catId> 
    <title>News</title> 
</category> 
<category> 
    <catId>97</catId><title>Articles</title> 
     <category> 
      <catId>101</catId> 
      <title>Destinations</title> 
     </category> 
     <category> 
      <catId>102</catId> 
      <title>Epics</title> 
     </category> 
</category> 
<category> 
    <catId>129</catId> 
    <title>Tuesday Night Bouldering</title> 
</category> 

Answer 1

您可以遞歸做到這一點。

但是你需要讓你的xml有一個根節點。

這裏是你的規格功能（是jQuery核心，所以我認爲移動版可以用它應付）

function CategoryToUl(xml){ 
    var categories = xml.children('category'); 
    if (categories.length > 0) 
    { 
     var ul = $('<ul/>'); 
     categories.each(function(){ 
      var $this = $(this); 
      var li = $('<li/>'); 
      var a = $('<a/>',{ 
       text: $this.children('title').text(), 
       href: '#' + $this.children('catId').text() 
      }); 
      li.append(a); 
      li.append(CategoryToUl($this)); 
      ul.append(li); 
     }); 
     return ul; 
    } 
    return null; 
} 

，這裏是如何調用它

$.ajax({ 
    url:'path-to.xml', 
    dataType: 'xml', 
    success: function(data){ 
     var xml = $(data); 
     $('#container').append(CategoryToUl(xml.children())); 
    } 
}); 

演示在http://www.jsfiddle.net/gaby/UC2dM/1/

---

它創建類似這樣的

<ul> 
    <li><a href="#96">News</a></li> 
    <li><a href="#97">Articles</a> 
     <ul> 
      <li><a href="#101">Destinations</a></li> 
      <li><a href="#102">Epics</a></li> 
     </ul></li> 
    <li><a href="#129">Tuesday Night Bouldering</a></li> 
</ul> 

Answer 2

jQuery.ajax({ 
    type: "GET", 
    url: 'your_xml.xml', //edit this to be the path of your file 
    dataType: ($.browser.msie) ? "text/xml" : "xml", 
    success: function(xml) { 
     var xml2 = load_xml(xml); 
     var i=0; 
     $(xml2).find('category').each(function(){ 
      $(xml2).find('catID').each(function(){ 
       //output of catID will be $(this).text() 
       alert($(this).text()) 
      }); 
      $(xml2).find('title').each(function(){ 
       //output of title will be $(this).text() 
       alert($(this).text()) 
      }); 
     }); 
    } 
}); 

和加載XML功能：

function load_xml(msg) { 
    if (typeof msg == 'string') { 
     if (window.DOMParser)//Firefox 
     { 
      parser=new DOMParser(); 
      data=parser.parseFromString(text,"text/xml"); 
     }else{ // Internet Explorer 
      data=new ActiveXObject("Microsoft.XMLDOM"); 
      data.async="false"; 
      data.loadXML(msg); 
     } 
    } else { 
     data = msg; 
    } 
    return data; 
} 

對不起，我覺得我應該解釋 - 這load_xml()功能將工作跨瀏覽器（IE，冷杉eFox，Chrome，Safari等）。

Answer 3

的JQuery變得那麼容易，因爲這樣的：

var xml = your xml... 
JQuery(xml).find('category').each(function(){ 
     JQuery(xml).find('catID').each(function(){     
      alert($(this).text()) 
     }); 
}); 

Answer 4

結構這是正確的AJAX

jQuery.ajax({ 
    type: "GET", 
    url: 'your_xml.xml', //edit this to be the path of your file 
    dataType: ($.browser.msie) ? "text/xml" : "xml", 
    success: function(xml) { 
     var xml2 = load_xml(xml); 
     var i=0; 
     $(xml2).find('category').each(function(){ 
      var category = $(this); 
      category.find('catID').each(function(){ 
       //output of catID will be $(this).text() 
       alert($(this).text()) 
      }); 
      category.find('title').each(function(){ 
       //output of title will be $(this).text() 
       alert($(this).text()) 
      }); 
     }); 
    } 
});