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

Home

Web Front-end

JS Tutorial

How to parse XML using jquery_javascript skills

May 16, 2016 pm 04:36 PM

jquery xml parse

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

&lt;&#63;xml version="1.0" encoding="UTF-8"&#63;&gt;
&lt;root&gt;
 &lt;book id="1"&gt;
  &lt;name&gt;深入浅出extjs&lt;/name&gt;
  &lt;author&gt;张三&lt;/author&gt;
  &lt;price&gt;88&lt;/price&gt;
 &lt;/book&gt;
 &lt;book id="2"&gt;
  &lt;name&gt;锋利的jQuery&lt;/name&gt;
  &lt;author&gt;李四&lt;/author&gt;
  &lt;price&gt;99&lt;/price&gt;
 &lt;/book&gt;
 &lt;book id="3"&gt;
  &lt;name&gt;深入浅出flex&lt;/name&gt;
  &lt;author&gt;王五&lt;/author&gt;
  &lt;price&gt;108&lt;/price&gt;
 &lt;/book&gt;
 &lt;book id="4"&gt;
  &lt;name&gt;java编程思想&lt;/name&gt;
  &lt;author&gt;钱七&lt;/author&gt;
  &lt;price&gt;128&lt;/price&gt;
 &lt;/book&gt;
&lt;/root&gt;

Copy after login

2. Page code:

&lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
&lt;title&gt;jquery解析xml&lt;/title&gt;
&lt;script type="text/javascript" src="js/jquery-1.4.2.min.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
 $(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+"&lt;br&gt;";
   });
   $('#mydiv').html(s);
  });
 });
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;div id='mydiv'&gt;&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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"

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn