在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 animate 动画效果使用说明
Nov 04 Javascript
JQuery的Ajax中Post方法传递中文出现乱码的解决方法
Oct 21 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
JavaScript数组随机排列实现随机洗牌功能
Mar 19 Javascript
JS+CSS实现美化的下拉列表框效果
Aug 11 Javascript
javascript实现支持移动设备画廊
Aug 24 Javascript
跟我学习javascript的循环
Nov 18 Javascript
详解JavaScript的回调函数
Nov 20 Javascript
js中的事件委托或是事件代理使用详解
Jun 23 Javascript
JavaScript中最常用的10种代码简写技巧总结
Jun 28 Javascript
基于vue通用表单解决方案的思考与分析
Mar 16 Javascript
基于vue 动态菜单 刷新空白问题的解决
Aug 06 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
又一个php 分页类实现代码
2009/12/03 PHP
Codeigniter实现处理用户登录验证后的URL跳转
2014/06/12 PHP
thinkphp模板用法和内容输出实例
2014/11/28 PHP
文字幻灯片
2006/06/26 Javascript
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
javascript 常用方法总结
2009/06/03 Javascript
js与jquery获取父元素,删除子元素的两种不同方法
2014/01/09 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
2014/02/10 Javascript
jquery插件lazyload.js延迟加载图片的使用方法
2014/02/19 Javascript
javascript实现iframe框架延时加载的方法
2014/10/30 Javascript
js表头排序实现方法
2015/01/16 Javascript
JavaScript数组对象实现增加一个返回随机元素的方法
2015/07/27 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
AngularJS控制器之间的通信方式详解
2016/11/03 Javascript
VueJs路由跳转——vue-router的使用详解
2017/01/10 Javascript
JS中解决谷歌浏览器记住密码输入框颜色改变功能
2017/02/13 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
vue生成token保存在客户端localStorage中的方法
2017/10/25 Javascript
layui实现文件或图片上传记录
2018/08/28 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
基于Vue+elementUI实现动态表单的校验功能(根据条件动态切换校验格式)
2019/04/04 Javascript
Vue2.0实现简单分页及跳转效果
2019/07/29 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
Python使用requests发送POST请求实例代码
2018/01/25 Python
用Q-learning算法实现自动走迷宫机器人的方法示例
2019/06/03 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
JENNIFER BEHR官网:各种耳环和发饰
2020/06/07 全球购物
副科竞争上岗演讲稿
2014/05/12 职场文书
《家》读后感:万惜拯救,冷暖自知
2019/09/25 职场文书
python之np.argmax()及对axis=0或者1的理解
2021/06/02 Python
Python实现生成bmp图像的方法
2021/06/13 Python
基于JavaScript实现年月日三级联动
2021/06/22 Javascript
SpringBoot2零基础到精通之数据与页面响应
2022/03/22 Java/Android
Docker下安装Oracle19c
2022/04/13 Servers