jquery ---- getXml文件(遍历显示其中某个节点下的内容)

来源:互联网 发布:linux根目录是什么 编辑:程序博客网 时间:2024/06/04 00:52

 

getxml.html:

 

<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript">
   $(document).ready(function(){
  $("#submit").click(function(){
     $.ajax({
      type:"GET",
     
url:"student.xml",
      dataType:"xml",
      success:function(data){
            var stud="<table border=\"1\">";
      $(data).find("student").each(function(){
             var name= $(this).find('first-name').text();
             var mark = $(this).find('marks').text()
             var city = $(this).find('city').text()
             stud += "<tr><td>"+name+"</td>";
             stud += "<td>"+mark+"</td>";
             stud += "<td>"+city+"</td></tr>";
       })
      stud += "</table>";
         $("#message").append(stud);
      
    }
   }) 
   return false; 
   
  })      
 });
</script>
<body>
   <p>To see the Names of the students extracted from XML file click the button given below:</p>
    <input type="submit" id="submit" />
    <div id="message">
   
    </div>

</body>

 

 

student.xml:

<?xml version="1.0" encoding="utf-8"?>

<school>
    <student>
     <roll>110</roll>
  <name>
   <first-name>Anil</first-name>
   <last-name>Sharma</last-name>
  </name>
  <address>
     <street>
        22/10 Sri Nagar Road
    </street>
    <city>
       Ajmer
    </city>
    <state>
      Rajasthan
    </state>
    <marks>
        85
    </marks>
  </address>
 </student>
 
 <student>
     <roll>111</roll>
  <name>
   <first-name>Ann</first-name>
   <last-name>Arora</last-name>
  </name>
  <address>
     <street>
        H.NO 11-B Alwar Gate
    </street>
    <city>
       Ajmer
    </city>
    <state>
      Rajasthan
    </state>
    <marks>
       92
    </marks>
  </address>
 </student>
</school>

 

如图所示:

 

原创粉丝点击