jquery實現的解析xml檔案程式碼例項

admin發表於2017-03-30
jQueryXML

本章節分享一段程式碼例項，它利用jquery實現了對xml檔案的解析功能。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<script type="text/javascript">
$(function(){
  $.get('demo/jQuery/xml/book.xml',function(data){
    //查詢所有的book節點
    var s="";
    $(data).find('book').each(function(i){
      var id=$(this).attr('id');
      var name=$(this).children('name').text();
      var author=$(this).children('author').text();
      var price=$(this).children('price').text();
      s+=id+"    "+name+"    "+author+"    "+price+"<br>";
    });
    $('#antzone').html(s);
  });
});
</script>
</head>
<body>
<div id='antzone'></div>
</body>
</html>

上面的程式碼實現了請求並解析的效果，xml檔案如下:

[XML] 純文字檢視 複製程式碼
<?xml version="1.0" encoding="UTF-8"?>
<root>
  <book id="1">
    <name>div教程</name>
    <author>螞蟻部落</author>
    <price>15</price>
  </book>
  <book id="2">
    <name>css教程</name>
    <author>softwhy.com</author>
    <price>20</price>
  </book>
  <book id="3">
    <name>json教程</name>
    <author>antzone</author>
    <price>50</price>
  </book>
</root>

相關文章