在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 相关文章推荐
Code: write(s,d) 输出连续字符串
Aug 19 Javascript
js no-repeat写法 背景不重复
Mar 18 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
Nov 18 Javascript
JS的get和set使用示例
Feb 20 Javascript
js中数组排序sort方法的原理分析
Nov 20 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
详解AngularJS Filter(过滤器)用法
Dec 28 Javascript
JavaScript实现弹出模态窗体并接受传值的方法
Feb 12 Javascript
Summernote实现图片上传功能的简单方法
Jul 11 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
react中实现搜索结果中关键词高亮显示
Jul 31 Javascript
Vue父组件向子组件传值以及data和props的区别详解
Mar 02 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
搜索引擎技术核心揭密
2006/10/09 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
php自定义函数截取汉字长度
2014/05/15 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
基于PHP常用文件函数和目录函数整理
2017/08/17 PHP
Swoole实现异步投递task任务案例详解
2019/04/02 PHP
php远程请求CURL实例教程(爬虫、保存登录状态)
2020/12/10 PHP
JQuery 拾色器插件发布-jquery.icolor.js
2010/10/20 Javascript
window.open关于浏览器拦截问题分析及解决方法
2013/02/05 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
2013/11/15 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
jQuery插件开发的五种形态小结
2015/03/04 Javascript
JavaScript中string对象
2015/06/12 Javascript
jQuery实现点击后标记当前菜单位置(背景高亮菜单)效果
2015/08/22 Javascript
浅析Node.js 中 Stream API 的使用
2015/10/23 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
老生常谈jacascript DOM节点获取
2017/04/17 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
AngularJS中的路由使用及实现代码
2017/10/09 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
详解解决使用axios发送json后台接收不到的问题
2018/06/27 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
2018/10/12 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
Sublime Text3 配置 NodeJs 环境的方法
2020/05/20 NodeJs
OpenLayers实现图层切换控件
2020/09/25 Javascript
python操作xml文件详细介绍
2014/06/09 Python
Pycharm设置界面全黑的方法
2018/05/23 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
Python实现的调用C语言函数功能简单实例
2019/03/13 Python
python,Django实现的淘宝客登录功能示例
2019/06/12 Python
自定义django admin model表单提交的例子
2019/08/23 Python
Python descriptor(描述符)的实现
2020/11/15 Python
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
2015年教学管理工作总结
2015/05/20 职场文书
党员学习型组织心得体会
2019/06/21 职场文书