在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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
关于用Jquery的height()、width()计算动态插入的IMG标签的宽高的问题
Dec 08 Javascript
jquery重新播放css动画所遇问题解决
Aug 21 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
SVG描边动画
Feb 23 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
深入浅析Vue.js中 computed和methods不同机制
Mar 22 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
Oct 20 Javascript
微信小程序实现授权登录
May 15 Javascript
AngularJS动态生成select下拉框的方法实例
Nov 17 Javascript
《javascript设计模式》学习笔记五:Javascript面向对象程序设计工厂模式实例分析
Apr 08 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循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
PHP实现的文件浏览器功能简单示例
2019/09/12 PHP
JS面向对象编程之对象使用分析
2010/08/19 Javascript
javaScript 动态访问JSon元素示例代码
2013/08/30 Javascript
前端开发过程中浏览器版本的两种判定方法
2013/10/30 Javascript
js仿百度登录页实现拖动窗口效果
2016/03/11 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
webpack学习--webpack经典7分钟入门教程
2017/06/28 Javascript
基于require.js的使用(实例讲解)
2017/09/07 Javascript
Angularjs cookie 操作实例详解
2017/09/27 Javascript
详解React-Native全球化多语言切换工具库react-native-i18n
2017/11/03 Javascript
p5.js 毕达哥拉斯树的实现代码
2018/03/23 Javascript
React注册倒计时功能的实现
2018/09/06 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
vue实现后台管理权限系统及顶栏三级菜单显示功能
2019/06/19 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
JS代码简洁方式之函数方法详解
2020/07/28 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
python生成随机mac地址的方法
2015/03/16 Python
Python入门教程之if语句的用法
2015/05/14 Python
视觉直观感受若干常用排序算法
2017/04/13 Python
tensorflow实现对图片的读取的示例代码
2018/02/12 Python
Python 微信爬虫完整实例【单线程与多线程】
2019/07/06 Python
Python 类的魔法属性用法实例分析
2019/11/21 Python
爱之链教学反思
2014/04/30 职场文书
上班离岗检讨书
2014/09/10 职场文书
承诺函范文
2015/01/21 职场文书
语文教师求职信范文
2015/03/20 职场文书
解除租赁合同协议书
2016/03/21 职场文书
利用Python网络爬虫爬取各大音乐评论的代码
2021/04/13 Python
动画《平凡职业成就世界最强》宣布制作OVA
2022/04/01 日漫
分享一个vue实现的记事本功能案例
2022/04/11 Vue.js