JQuery解析XML

用JavaScript解析XML数据是常见的编程任务，JavaScript能做的，JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

第一种方案：

 
      01 
       <script type="text/javascript">  
     
      02 
       $(document).ready(function() {  
     
      03 
           $.ajax({  
     
      04 
               url: 'http://www.nowamagic.net/cgi/test.xml',  
     
      05 
               dataType: 'xml',  
     
      06 
               success: function(data){  
     
      07 
                   //console.log(data);  
     
      08 
                   $(data).find("channel").find("item").each(function(index, ele) {  
     
      09 
                       var titles = $(ele).find("title").text();  
     
      10 
                       var links = $(ele).find("link").text();  
     
      11 
                       console.log(titles+'-----');  
     
      12 
                       $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');  
     
      13 
                   });  
     
      14 
               }  
     
      15 
           });  
     
      16 
      }) 
     
      17 
      </script> 
     
      18 
        
      19 
           <div id="noticecon">  
     
      20 
               <ol>  
     
      21 
               </ol>  
     
      22 
           </div>

第二种方案：

 
      01 
       <script type="text/javascript">  
     
      02 
           $.get("http://www.nowamagic.net/cgi/test.xml", function(data){  
     
      03 
               $(data).find('channel').find('item').each(function(index, ele){  
     
      04 
                   var titles = $(ele).find('title').text();  
     
      05 
                   var links = $(ele).find('link').text();  
     
      06 
                   $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');  
     
      07 
               })  
     
      08 
           });  
     
      09 
      </script> 
     
      10 
        
      11 
           <div id="noticecon">  
     
      12 
               <ol>  
     
      13 
               </ol>  
     
      14 
           </div>

一般步骤如下：

1. 读取xml文件

 
      1 
       $.get("xmlfile.xml",function(xml){  
     
      2 
           //xml即为可以读取使用的内容，具体读取见第2点  
     
      3 
      });

2. 读取xml内容

如果读取的xml是来于xml文件，这结合上面的那点，处理如下：

 
      1 
       $.get("xmlfile.xml",function(xml){     
     
      2 
           $(xml).find("item").length;     
     
      3 
      });

如果读取的是xml字符串，则要注意一点，xml字符串的必然被"<xml>"和"</xml>"包围才可以被解析

 
      1 
       $("<xml><root><item></item></root></xml>").find("item").length;

解析xml内容：

示例xml：

 
      01 
       <?xml version="1.0" encoding="utf-8" ?>  
     
      02 
      <fields> 
     
      03 
         <field Name="Name1">  
     
      04 
           <fieldname>dsname</fieldname>  
     
      05 
           <datatype>字符</datatype>  
     
      06 
         </field>  
     
      07 
         <field Name="Name2">  
     
      08 
           <fieldname>dstype</fieldname>  
     
      09 
           <datatype>字符</datatype>  
     
      10 
         </field>  
     
      11 
      </fields>

以下是解析示例代码：

 
      1 
       $(xml).find("field").each(function() {  
     
      2 
           var field = $(this);  
     
      3 
           var fName = field.attr("Name");//读取节点属性  
     
      4 
           var dataType = field.find("datatype").text();//读取子节点的值  
     
      5 
      }); 
     
    <!DOCTYPE html PUBLIC  
    "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd" 
    > 
   
    <html> 
   
    <head> 
   
    <meta http-equiv= 
    "Content-Type" 
    content= 
    "text/html; charset=UTF-8" 
    > 
   
    <title>jquery解析xml</title> 
   
    <script type= 
    "text/javascript" 
    src= 
    "js/jquery-1.4.2.min.js" 
    ></script> 
   
    <script type= 
    "text/javascript" 
    > 
   
    $( 
    function 
    (){ 
   
    $.post( 
    'books.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>" 
    ; 
   
    }); 
   
    $( 
    '#mydiv' 
    ).html(s); 
   
    }); 
   
    }); 
   
    </script> 
   
    </head> 
   
    <body> 
   
    <div id= 
    'mydiv' 
    ></div> 
   
    </body> 
   
    </html> 
   
     <? 
     xml 
     version 
     = 
     "1.0" 
     encoding 
     = 
     "UTF-8" 
     ?> 
    
     < 
     root 
     > 
    
     < 
     book 
     id 
     = 
     "1" 
     > 
    
     < 
     name 
     >深入浅出extjs</ 
     name 
     > 
    
     < 
     author 
     >张三</ 
     author 
     > 
    
     < 
     price 
     >88</ 
     price 
     > 
    
     </ 
     book 
     > 
    
     < 
     book 
     id 
     = 
     "2" 
     > 
    
     < 
     name 
     >锋利的jQuery</ 
     name 
     > 
    
     < 
     author 
     >李四</ 
     author 
     > 
    
     < 
     price 
     >99</ 
     price 
     > 
    
     </ 
     book 
     > 
    
     < 
     book 
     id 
     = 
     "3" 
     > 
    
     < 
     name 
     >深入浅出flex</ 
     name 
     > 
    
     < 
     author 
     >王五</ 
     author 
     > 
    
     < 
     price 
     >108</ 
     price 
     > 
    
     </ 
     book 
     > 
    
     < 
     book 
     id 
     = 
     "4" 
     > 
    
     < 
     name 
     >java编程思想</ 
     name 
     > 
    
     < 
     author 
     >钱七</ 
     author 
     > 
    
     < 
     price 
     >128</ 
     price 
     > 
    
     </ 
     book 
     > 
    
     </ 
     root 
     >

猜你喜欢