在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 相关文章推荐
js split 的用法和定义 js split分割字符串成数组的实例代码
May 13 Javascript
根据身份证号自动输出相关信息(籍贯,出身日期,性别)
Nov 15 Javascript
JavaScript获取当前页面上的指定对象示例代码
Feb 28 Javascript
js实现遮罩层弹出框的方法
Jan 15 Javascript
原生js模拟淘宝购物车项目实战
Nov 18 Javascript
jQuery自制提示框tooltip改进版
Aug 01 Javascript
jQuery实现立体式数字动态增加(animate方法)
Dec 21 Javascript
详解如何在Angular中快速定位DOM元素
May 17 Javascript
webpack2.0配置postcss-loader的方法
Aug 17 Javascript
vue项目实战总结篇
Feb 11 Javascript
jQuery AJAX 方法success()后台传来的4种数据详解
Aug 08 jQuery
原生js实现获取form表单数据代码实例
Mar 27 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中加session验证)
2012/08/22 PHP
如何通过Linux命令行使用和运行PHP脚本
2015/07/29 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
AJAX异步从优酷专辑中采集所有视频及信息(JavaScript代码)
2010/11/20 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
jquery scrollTop方法根据滚动像素显示隐藏顶部导航条
2013/05/27 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jQuery中animate动画第二次点击事件没反应
2015/05/07 Javascript
JS获取月份最后天数、最大天数与某日周数的方法
2015/12/08 Javascript
AngularJS 使用$sce控制代码安全检查
2016/01/05 Javascript
javascript设置和获取cookie的方法实例详解
2016/01/05 Javascript
即将发布的jQuery 3 有哪些新特性
2016/04/14 Javascript
jQuery Mobile中的button按钮组件基础使用教程
2016/05/23 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
BootStrap Validator使用注意事项(必看篇)
2016/09/28 Javascript
nodejs模块nodemailer基本使用-邮件发送示例(支持附件)
2017/03/28 NodeJs
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
vue轮播图插件vue-concise-slider的使用
2018/03/13 Javascript
vue实现重置表单信息为空的方法
2018/09/29 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
Postman动态获取返回值过程详解
2020/06/30 Javascript
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
python正则表达式及使用正则表达式的例子
2018/01/22 Python
Python实现FM算法解析
2019/06/18 Python
python爬虫豆瓣网的模拟登录实现
2019/08/21 Python
Tensorflow 实现分批量读取数据
2020/01/04 Python
Python基于stuck实现scoket文件传输
2020/04/02 Python
python使用matplotlib:subplot绘制多个子图的示例
2020/09/24 Python
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
RUIFIER官网:英国奢侈高级珠宝品牌
2020/06/12 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
九年级体育教学反思
2014/01/23 职场文书
税务会计岗位职责
2014/02/18 职场文书
护士个人自我鉴定
2014/03/24 职场文书
新年联欢会主持词
2014/03/27 职场文书