jquery 解析xml字符串例子

XML和HTML都是标记语言,语法形式非常相似,同属于一个语言体系。对于HTML的解析,我是使用jQuery非常方便,其实,我们也可以用jquery解析XML,也是同样的方便。

如果你用过Java、PHP等语言解析过XML,相信会跟我有相同的感觉,那就是很麻烦。改用jQuery来读取、分析、操作XML后,给人意想不到的轻松感。下面我们来看看使用jQuery处理XML文件的几种形式方法。

使用JavaScript常规方法解析XML

var xmlDoc = request.responseXML;
try // Build Markers, if available
{
  var markers = xmlDoc.getElementsByTagName("marker") ;
  for ( var i = 0; i < markers.length ; i++ ) {
    var point = {
      markers[i].getAttribute("lat")),
      markers[i].getAttribute("lng")
    };
  }
} catch(e) {}

使用jQuery解析XML

$(request.responseXML).find("marker").each(function() {
  var marker = $(this);
  var point = {
    marker.attr("lat"),
    marker.attr("lng")
  };
});

使用$.parseXML()解析XML

如果你已经把XML内容读到了字符串里,你可以使用$.parseXML()方法分析它:

xml = $.parseXML( $('body > pre').text() );

$(xml).find("entry").each(function() {
    var $this = $(this),
        item  = {
            Address1: $this.find("Address1").text(),
            Address2: $this.find("Address2").attr('name')
           
        }
});

例子

一、xml文件结构:books.xml

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

二、页面代码:

<!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文档,下面例子可以加载xml再解析

加载并解析XML

创建实例XML文档(Student.xml)
[html] view plain copy
<?xml version="1.0" encoding="utf-8" ?> 
<stulist> 
  <student email="peter@163.com"> 
    <name>peter</name> 
    <id>1</id> 
  </student> 
 
  <student email="ken@163.com"> 
    <name>ken</name> 
    <id>2</id> 
  </student> 
</stulist> 
4、获取XML

$(document).ready(function() { 
    $.ajax({ 
        url: '/xml/Student.xml', 
        type: 'GET', 
        dataType: 'xml', 
        timeout: 1000,  //设定超时 
        cache: false,   //禁用缓存 
        error: function(xml) { 
            alert("加载XML文档出错!"); 
        }, 
        success: GetStudentComplete   //设置成功后回调函数 
    }); 
}); 
    通过JQuery的Ajax函数进行读取。
5、 解释XML

//获取XML成功后回调函数 
function GetStudentComplete(xml) { 
    $(xml).find("student").each(function(i) {     //查找所有student节点并遍历 
        var id = $(this).children("id");          //获得子节点 
        var id_vaule = id.text();                 //获取节点文本 
        var email_vaule = $(this).attr("email");  //获取节点的属性 
        alert(id_vaule); 
        alert(email_vaule); 
    }); 

    解析XML文档与解析DOM一样,也可以用find()、children()等函数来解析和用each()方法来进行遍历,另外也可以用text()和attr()方法来获取节点文本和属性。

很多情况下XML文件不能正常解析都是由于Content-Type没有设置好。如果Content-Type本身就是一个XML文件则不需要设置;如果是由后台程序动态生成的,那么就需要设置Content-Type为“text/xml”,否则JQuery会以默认的“text/html”方式处理,导致解析失败。以下是几种常见语言中设置Content-Type的方式

header("Content-Type:text/xml");     //PHP 
response.ContentType = "text/xml";   //ASP 
response.setContentType("text/xm");  //JSP 

时间: 2024-10-04 06:01:09

jquery 解析xml字符串例子的相关文章

jquery解析xml字符串示例

 用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子 第一种方案:   代码如下: <script type="text/javascript"> $(document).ready(function() {  $.ajax({     url: 'http://www.test.net/cgi/test.xml',     dataType: 'xml',     s

jquery解析XML字符串和XML文件的方法说明

 本篇文章主要是对jquery解析XML字符串和XML文件的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1.读取XML字符串: 例如:  代码如下: $(document).ready(function(){    var xml = "<xml><root><record><name>liubl</name></record><record><name>chencp</nam

jquery解析xml字符串简单示例

 这篇文章主要介绍了jquery解析xml字符串示例,需要的朋友可以参考下 代码如下: var $xml = $("<aa><bb para="bbpara">bbtext</bb> <cc> cctext </cc><cc>789798</cc>aatext</aa>"); function log(o){  $("textarea").val($(

jquery解析XML字符串和XML文件的方法说明_jquery

1.读取XML字符串:例如: 复制代码 代码如下: $(document).ready(function(){ var xml = "<xml><root><record><name>liubl</name></record><record><name>chencp</name</record></root></xml>";//var xml=&qu

jquery解析xml字符串简单示例_jquery

复制代码 代码如下: var $xml = $("<aa><bb para=\"bbpara\">bbtext</bb> <cc> cctext </cc><cc>789798</cc>aatext</aa>");function log(o){ $("textarea").val($("textarea").val()+"

JQuery解析XML的方法小结_jquery

本文实例总结了JQuery解析XML的方法.分享给大家供大家参考,具体如下: 用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://localhost/cgi/test.xml', dat

JQuery解析XML数据的几个简单实例_jquery

用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做.下面我们来总结几个使用JQuery解析XML的例子. 第一种方案: <script type="text/javascript"> $(document).ready(function() { $.ajax({ url: 'http://www.jb51.net/cgi/test.xml', dataType: 'xml', success: function(data

jQuery解析XML文件同时动态增加js文件的方法_jquery

本文实例讲述了jQuery解析XML文件同时动态增加js文件的方法.分享给大家供大家参考.具体实现方法如下: $(function(){ $.ajax({ url: 'js/config/jsConfig.xml', dataType: 'xml', success: function(data){ $(data).find("moduleName").each(function(i,obj) { var field = $(this); var funcName = field.at

使用jquery解析XML示例代码_jquery

xml文件结构:books.xml <?xml version="1.0" encoding="UTF-8"?> <root> <book id="1"> <name>深入浅出extjs</name> <author>张三</author> <price>88</price> </book> <book id="