在jQuery中处理XML数据的大致方法


Posted in Javascript onAugust 14, 2015

XML 全称为 可扩展标记语言,其文件结构与 HTML 类似,但是区别也很明显,HTML 只能使用已经定义的标签,如 title, body, span 等,标签种类是有限的,但是 XML 除了可以使用 HTML 的所有标签,还可以自己随意定制标签,如 person, name, sex, age 等,而且 XML 中的标签属性名称,也可以随意定制。另外二者用途方面也有明显区别,HTML 主要用来展示数据,XML 则侧重于数据的存储和传输。例如下面这个简单的 XML 文档用以存储员工信息:

<员工>
 <姓名>麻花疼</姓名>
 <性别>男</性别>
 <年龄>40</年龄>
 <职位>疼逊CEO</职位>
</员工>

下面本文简单介绍如何使用 jQuery 载入一个 XML 文件并从中获取自己想要的数据。
准备 XML 文档及测试数据

假设我们现在要构建一个包含人员信息的 XML 文档,该 XML 文档要能反映其姓名、所在公司、公司简介、公司产品简介几个信息,那么我们可以把 XML 设计成如下样式:

<?xml version="1.0" encoding="utf-8" ?>
<Persons>
 <Person FullName="Bill Gates">
 <Corporation>Microsoft</Corporation>
 <Description>The largest software company</Description>
 <Products>Windows series OS, SQL Server Database, XBox 360...</Products>
 </Person>

 <Person FullName="Jobs">
 <Corporation>Apple</Corporation>
 <Description>The famous software company</Description>
 <Products>Macintosh, iPhone, iPod, iPad...</Products>
 </Person>

 <Person FullName="Larry Page">
 <Corporation>Google</Corporation>
 <Description>the largest search engine</Description>
 <Products>Google search, Google Adsense, Gmail...</Products>
 </Person>
</Persons>

简单分析一下这个 XML 文件,其中第一行 <?xml version="1.0" encoding="utf-8" ?> 是声明此文档为 XML 文档,且文本编码为 utf-8。第二行及最后一行 Persons 为文档的根元素,然后每个 Person 元素即表示每个人,姓名存储在 Person 元素的 FullName 属性中,Corporation 元素用来存储所在公司名称,Description 元素用来存储公司简介,Products 元素用来存储公司产品简介。至此,该文档里面包含了比尔·盖茨、乔布斯、拉里·佩奇三位 IT 界大佬的信息。
用 jQuery 解析此 XML 文档

首先要用$.get()方法载入 XML 文件,然后用find()方法找到所有 Person 元素,再用 each() 方法进行遍历,代码如下:

<script type="text/javascript">
jQuery(document).ready(function() {
 /* 先用 $.get 方法载入 XML 文件 */
 $.get("EmployeesInformation.xml", function(xmlData) {
 /* 我们要讲得到的数据放入一个表格里面,这里定义一个表格字符窜 */
 var htmlData = "<table border='1'>";

 /* 找到 Person 元素,然后用 each 方法进行遍历 */
 $(xmlData).find("Person").each(function() {
  var Person = $(this); /* 将当前元素复制给 Person */
  var FullName = Person.attr("FullName"); /* 获取 Person 的 FullName 属性 */
  var Corporation = Person.find("Corporation").text(); /* 获取 Person 中子元素 Corporation 的值 */
  var Description = Person.find("Description").text(); /* 获取 Person 中子元素 Description 的值 */
  var Products = Person.find("Products").text(); /* 获取 Person 中子元素 Products 的值 */

  /* 将得到的数据,放到表格的一行中 */
  htmlData += "<tr>";
  htmlData += " <td>" + FullName + "</td>";
  htmlData += " <td>" + Corporation + "</td>";
  htmlData += " <td>" + Description + "</td>";
  htmlData += " <td>" + Products + "</td>";
  htmlData += "</tr>";
 });
 
 //完成表格字符窜
 htmlData += "</table>";
 //将表格放到 body 中
 $("body").append(htmlData);
 });
});
</script>

简单解释一下这段代码,由于此 XML 文档相对简单,所以这段代码也比较简短,代码中$.get()方法的第一个参数为 XML 文件地址,第二个参数是一个回调函数,回调函数中参数 xmlData 即为 XML 文件中的数据。在此示例中,我们打算 XML 中的数据以表格的形式显示在 HTML 中,所以先构建一个表格字符串 htmlData 先。

紧接着,用find()方法,找到所有名为 Person 的元素,因为每个 Person 元素即表示一个人,然后再用 each() 方法进行遍历,把遍历到的元素赋个一个变量 Person。用Person.attr()方法去除元素的 FullName 属性,也就是人员的姓名,再用find()方法找到其子元素 Corporation,Description 和 Products 并返回它们的文本内容,并用 tr 和 td 标签将它们包装在表格的一个行里面。最后完成表格字符串,并将表格添加到 body 标签中。

Javascript 相关文章推荐
javascript垃圾收集机制与内存泄漏详细解析
Nov 11 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
在Node.js应用中使用Redis的方法简介
Jun 24 Javascript
jQuery简单入门示例之用户校验demo示例
Jul 09 Javascript
jquery pagination分页插件使用详解(后台struts2)
Jan 22 Javascript
微信小程序中用WebStorm使用LESS
Mar 08 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
vue项目中使用fetch的实现方法
Apr 25 Javascript
小程序实现搜索框功能
Mar 26 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
vue 子组件修改data或调用操作
Aug 07 Javascript
仿照Element-ui实现一个简易的$message方法
Sep 14 Javascript
JavaScript中var关键字的使用详解
Aug 14 #Javascript
JavaScript的jQuery库中ready方法的学习教程
Aug 14 #Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 #Javascript
JavaScript学习笔记之DOM基础 2.4
Aug 14 #Javascript
关于JavaScript的变量的数据类型的判断方法
Aug 14 #Javascript
js实现表单检测及表单提示的方法
Aug 14 #Javascript
JavaScript中的this关键字使用详解
Aug 14 #Javascript
You might like
用PHP动态生成虚拟现实VRML网页
2006/10/09 PHP
动易数据转成dedecms的php程序
2007/04/07 PHP
php中如何防止表单的重复提交
2013/08/02 PHP
php 使用GD库为页面增加水印示例代码
2014/03/24 PHP
yii 2.0中表单小部件的使用方法示例
2017/05/23 PHP
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
2011/01/01 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
2012/02/27 Javascript
JavaScript异步编程:异步数据收集的具体方法
2013/08/19 Javascript
改变状态栏文字的js代码
2014/06/13 Javascript
js实现顶部可折叠的菜单工具栏效果实例
2015/05/09 Javascript
JavaScript实现单击下拉框选择直接跳转页面的方法
2015/07/02 Javascript
Javascript日期格式化format函数的使用方法
2016/08/30 Javascript
jQuery Collapse1.1.0折叠插件简单使用
2017/08/28 jQuery
JS实现websocket长轮询实时消息提示的效果
2017/10/10 Javascript
js+css实现红包雨效果
2018/07/12 Javascript
解决vue中post方式提交数据后台无法接收的问题
2018/08/11 Javascript
微信小程序自定义底部导航带跳转功能
2018/11/27 Javascript
react+ant design实现Table的增、删、改的示例代码
2018/12/27 Javascript
Angular6 用户自定义标签开发的实现方法
2019/01/08 Javascript
Angular如何由模板生成DOM树的方法
2019/12/23 Javascript
JavaScript对象原型链原理解析
2020/01/22 Javascript
Vue3.0的优化总结
2020/10/16 Javascript
vue router-link 默认a标签去除下划线的实现
2020/11/06 Javascript
Python3 正在毁灭 Python的原因分析
2014/11/28 Python
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
python基于xmlrpc实现二进制文件传输的方法
2015/06/02 Python
Python爬取十篇新闻统计TF-IDF
2018/01/03 Python
关于Pytorch的MLP模块实现方式
2020/01/07 Python
Window系统下Python如何安装OpenCV库
2020/03/05 Python
台湾线上百货零售购物平台:friDay购物
2017/08/18 全球购物
COACH德国官方网站:纽约现代奢侈品牌,1941年
2018/06/09 全球购物
护士的自我鉴定
2014/02/07 职场文书
企业仓管员岗位职责
2014/06/15 职场文书
小学中队长竞选稿
2015/11/20 职场文书
浅谈Python中的正则表达式
2021/06/28 Python