How to parse XML using jquery_javascript skills-JS Tutorial-php.cn

How to parse XML using jquery_javascript skills

WBOY

Release： 2016-05-16 16:36:58

Original

1200 people have browsed it

The example in this article describes the method of using jquery to parse XML, and shares it with everyone for your reference. The specific method is as follows:

1. xml file structure: books.xml

<&#63;xml version="1.0" encoding="UTF-8"&#63;>
<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>

Copy after login

2. Page code:

<!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>

Copy after login

The operation effect diagram is as follows:

Interested readers can click here to download the complete code.

Readers who are interested in more content related to jQuery xml operation can check out the special topic of this site: "Summary of jQuery xml operation skills"