使用jquery解析XML示例代碼

字號(hào):


    易賢網(wǎng)網(wǎng)校上線了!
    >>>點(diǎn)擊進(jìn)入<<<
    網(wǎng)校開發(fā)及擁有的課件范圍涉及公務(wù)員、財(cái)會(huì)類、外語類、外貿(mào)類、學(xué)歷類、
    職業(yè)資格類、計(jì)算機(jī)類、建筑工程類、等9大類考試的在線網(wǎng)絡(luò)培訓(xùn)輔導(dǎo)。
    xml文件結(jié)構(gòu):books.xml
    view sourceprint?01 <?xml version="1.0" encoding="UTF-8"?> 
    02 <root> 
    03 <book id="1"> 
    04 <name>深入淺出extjs</name> 
    05 <author>張三</author> 
    06 <price>88</price> 
    07 </book> 
    08 <book id="2"> 
    09 <name>鋒利的jQuery</name> 
    10 <author>李四</author> 
    11 <price>99</price> 
    12 </book> 
    13 <book id="3"> 
    14 <name>深入淺出flex</name> 
    15 <author>王五</author> 
    16 <price>108</price> 
    17 </book> 
    18 <book id="4"> 
    19 <name>java編程思想</name> 
    20 <author>錢七</author> 
    21 <price>128</price> 
    22 </book> 
    23 </root>
    頁面代碼:
    view sourceprint?01 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
    02 <html> 
    03 <head> 
    04 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
    05 <title>jquery解析xml</title> 
    06 <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
    07 <script type="text/javascript"> 
    08 $(function(){ 
    09 $.post('books.xml',function(data){ 
    10 //查找所有的book節(jié)點(diǎn) 
    11 var s=""; 
    12 $(data).find('book').each(function(i){ 
    13 var id=$(this).attr('id'); 
    14 var name=$(this).children('name').text(); 
    15 var author=$(this).children('author').text(); 
    16 var price=$(this).children('price').text(); 
    17 s+=id+"    "+name+"    "+author+"    "+price+"<br>"; 
    18 }); 
    19 $('#mydiv').html(s); 
    20 }); 
    21 }); 
    22 </script> 
    23 </head> 
    24 <body> 
    25 <div id='mydiv'></div> 
    26 </body> 
    27 </html>