`
zengshaotao
  • 浏览: 792538 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JQuery解析XML

 
阅读更多

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

第一种方案:

01 <script type="text/javascript">
02 $(document).ready(function() {
03     $.ajax({
04         url: 'http://www.nowamagic.net/cgi/test.xml',
05         dataType: 'xml',
06         success: function(data){
07             //console.log(data);
08             $(data).find("channel").find("item").each(function(index, ele) {
09                 var titles = $(ele).find("title").text();
10                 var links = $(ele).find("link").text();
11                 console.log(titles+'-----');
12                 $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
13             });
14         }
15     });
16 })
17 </script>
18  
19     <div id="noticecon">
20         <ol>
21         </ol>
22     </div>

第二种方案:

01 <script type="text/javascript">
02     $.get("http://www.nowamagic.net/cgi/test.xml"function(data){
03         $(data).find('channel').find('item').each(function(index, ele){
04             var titles = $(ele).find('title').text();
05             var links = $(ele).find('link').text();
06             $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
07         })
08     });
09 </script>
10  
11     <div id="noticecon">
12         <ol>
13         </ol>
14     </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:

01 <?xml version="1.0" encoding="utf-8" ?>
02 <fields>
03   <field Name="Name1">
04     <fieldname>dsname</fieldname>
05     <datatype>字符</datatype>
06   </field>
07   <field Name="Name2">
08     <fieldname>dstype</fieldname>
09     <datatype>字符</datatype>
10   </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>
分享到:
评论

相关推荐

    jQuery 解析xml文件

    关于jq读取xml的,有需要的朋友可以下载。

    JQuery 解析XML省 市 县 三级联动

    在IT领域,尤其是在Web开发中,"JQuery 解析XML省市区县三级联动"是一个常见的需求,主要用于构建交互式的下拉菜单,使得用户在选择省份时,对应的市和县会根据所选省份动态加载。这样的功能可以提升用户体验,减少...

    jQuery解析xml文件,实现省市县三级联动下拉框

    本主题将探讨如何利用jQuery解析XML文件,进而实现省市县三级联动的下拉框效果,这是一种常见的地理数据展示方式,常用于地址选择或者物流配送等场景。 首先,XML(Extensible Markup Language)是一种用于存储和...

    jquery解析xml

    ### jQuery解析XML:深入理解与应用 在Web开发中,数据的处理与展现是至关重要的环节,而XML(可扩展标记语言)作为一种广泛使用的数据交换格式,其在数据存储、传输以及解析方面扮演着重要角色。jQuery,作为一款...

    jquery解析xml并实现二级联动

    本主题将深入探讨如何使用jQuery解析XML数据,并利用这些数据实现省市二级联动的效果。这种功能常见于地理选择,用户在选择省份后,下拉菜单会自动更新展示对应省份的城市选项。 首先,我们需要理解XML(Extensible...

    轻松使用jquery解析XML

    标题中的“轻松使用jQuery解析XML”意味着我们将探讨如何利用JavaScript库jQuery处理XML文档,以便在Web应用程序中方便地获取和操作数据。XML(可扩展标记语言)是一种结构化数据格式,常用于存储和传输数据。jQuery...

    jquery 解析xml的简单例子

    本文将深入探讨如何使用jQuery解析XML(eXtensible Markup Language)文件,这是一种结构化数据存储格式,常用于数据交换和网页应用程序。 首先,我们需要了解jQuery的核心功能之一——`$.ajax()`方法,它是进行...

    Jquery操作xml_Demo

    通过这个简单的 jQuery 和 XML 操作示例,我们了解了如何使用 jQuery 的 `$.ajax()` 函数加载 XML 文件,以及如何使用 jQuery 的选择器和方法来解析和显示 XML 数据。在实际应用中,可以根据需求进行更复杂的数据...

    使用jquery解析XML的方法

    此外,除了使用jQuery解析XML外,还应该了解jQuery如何操作XML,如修改、增加、删除节点,以及如何创建新的XML文档等。这些操作技能使得前端开发者可以灵活处理各种数据交换格式,进而构建功能更加丰富的Web应用。 ...

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

    JQuery解析XML数据的几个简单实例中,JQuery是JavaScript的一个库,它简化了JavaScript编程。在处理XML数据方面,JQuery提供了一套非常便捷的方法来解析和操作XML文档。XML是“可扩展标记语言”(Extensible Markup ...

    JQuery解析XML的方法小结

    本文实例总结了JQuery解析XML的方法。分享给大家供大家参考,具体如下: 用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。 第一种方案...

    jquery解析XML及获取XML节点名称的实现代码

    本文将详细讲解如何使用jQuery解析XML文档以及获取XML节点的名称。 首先,让我们了解XML(eXtensible Markup Language)。XML是一种标记语言,常用于存储和传输结构化数据。它通过标签来定义数据的结构,可以被各种...

    jQuery解析XML 详解及方法总结

    本文将详细介绍使用jQuery解析XML的几种方法,以及相关实例。 首先,了解XML和HTML之间的关系是必要的。XML和HTML在语法形式上非常相似,两者都属于标记语言体系。HTML主要是用来定义网页的内容结构,而XML更加灵活...

    jQuery加载并解析XML

    本篇文章将深入探讨如何使用jQuery来加载和解析XML数据,这是一种常见用于传输和存储结构化数据的方式。 首先,我们需要理解XML(Extensible Markup Language)。XML是一种标记语言,允许我们创建自定义的标签来...

    使用jquery解析XML示例代码

    在了解了上述概念和步骤后,你可以更加深入地掌握jQuery解析XML文件的技能,并且应用到实际的项目开发中去。需要注意的是,在实际应用中还需要关注AJAX请求的错误处理,例如,需要编写处理请求失败或数据返回错误的...

    jquery解析xml字符串示例分享

    在本文中,我们将探讨使用jQuery解析XML字符串的技术和方法。在前端开发中,处理XML数据是一种常见任务,而jQuery作为JavaScript的库,提供了强大的工具来简化这一过程。为了达到这个目的,我们会介绍几个使用jQuery...

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

    本文将详细介绍如何使用jQuery解析XML字符串和XML文件。 首先,我们来看如何解析XML字符串。在给定的示例中,我们创建了一个XML字符串: ```javascript var xml = "&lt;xml&gt;&lt;root&gt;&lt;record&gt;&lt;name&gt;liubl&lt;/name&gt;&lt;/record...

Global site tag (gtag.js) - Google Analytics