JQuery解析XML

最新推荐文章于 2020-11-14 23:19:26 发布

zengshaotao

最新推荐文章于 2020-11-14 23:19:26 发布

阅读量254

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： javascript ViewUI

本文链接：https://blog.youkuaiyun.com/zengshaotao/article/details/84877624

JQuery 专栏收录该内容

80 篇文章

订阅专栏

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

第一种方案：

 
<script type="text/javascript"> 

$(document).ready(function() { 

    $.ajax({ 

        url: 'http://www.nowamagic.net/cgi/test.xml', 

        dataType: 'xml', 

        success: function(data){ 

            //console.log(data); 

            $(data).find("channel").find("item").each(function(index, ele) { 

                var titles = $(ele).find("title").text(); 

                var links = $(ele).find("link").text(); 

                console.log(titles+'-----'); 

                $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>'); 

            }); 

        } 

    }); 

    16})

    17</script>

    18 

    <div id="noticecon"> 

        <ol> 

        </ol> 

    </div>

第二种方案：

 
<script type="text/javascript"> 

    $.get("http://www.nowamagic.net/cgi/test.xml", function(data){ 

        $(data).find('channel').find('item').each(function(index, ele){ 

            var titles = $(ele).find('title').text(); 

            var links = $(ele).find('link').text(); 

            $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>'); 

        }) 

    }); 

    09</script>

    10 

    <div id="noticecon"> 

        <ol> 

        </ol> 

    </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：

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

    02<fields>

  <field Name="Name1"> 

    <fieldname>dsname</fieldname> 

    <datatype>字符</datatype> 

  </field> 

  <field Name="Name2"> 

    <fieldname>dstype</fieldname> 

    <datatype>字符</datatype> 

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