JQuery读取XML文件数据并显示的实现代码


Posted in Javascript onDecember 16, 2009

准备工作

在开始之前我们需要做如下准备工作:

1.创建一个名为DEMO.html空白html文件;(推荐使用Editplus创建)

2.熟悉JQuery框架的基本语法;(不熟悉没关系,后面我会注释得很详细)

3.创建一个名为data.xml的XML文件用来存储数据,XML的结构下面会涉及到,你也可以下载我打包好的文件查看;

4.一个loading.gif图片,这个图片用于在将XML读取出来的等待时间里面显示在空白html文档中

正式开始

Step 1:首先让我们看看这个data.xml的简单结构,我这里演示的数据是"Saturn为您推荐的几本书",故为书籍信息,那么xml就包括书籍的名称,缩略图和书籍描述信息;

以下为XML文件代码:

<?xml version="1.0" encoding="utf-8" ?> 
<books> 
<book title="藏地密码" imageurl="images/Tibet_Code.jpg"> 
<description> 
这里是概况(3water.com) 
</description> 
</book> <book title="剑桥雅思6" imageurl="images/ielts.jpg"> 
<description> 
这里是概况(3water.com) 
</description> 
</book> 
<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
这里是概况(3water.com) 
</description> 
</book> 
</books>

其次,让我们看看加载在空白HTML文档里面的JavaScript代码:

$(document).ready(function() 
{ 
$.get('myData.xml', function(d){ 
$('body').append('<h1> Saturn给你推荐几本书: </h1>'); 
$('body').append('<dl />'); $(d).find('book').each(function(){ 
var $book = $(this); 
var title = $book.attr("title"); 
var description = $book.find('description').text(); 
var imageurl = $book.attr('imageurl'); 
var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>'; 
html += '<dd> <span class="loadingPic" alt="Loading" />'; 
html += '<p class="title">' + title + '</p>'; 
html += '<p> ' + description + '</p>' ; 
html += '</dd>'; 
$('dl').append($(html)); 
$('.loadingPic').fadeOut(2000); 
}); 
}); 
});

Step 2:这里,我只讲下JavaScript代码原理与运行流程,不过分讨论语法,如果你对语法有任何疑问,请给我留言或者查看JQuery相关文档。

行1:当HTML文档准备完毕之后(即html和JavaScript都下载完毕),会自动触发JQuery的 $(document).ready方法及里面的过程。显然,这里首先执行的是$.get方法。
行3:$.get的第一个参数是XML文件的相对路径(注意路径要填写正确,这里我们把XML和网页文件放在同一文件夹)。第二个参数是一个Callback函数,即回调函数。就是说通过get方法来请求这个XML文件的内容,然后通过这个callback回调函数来操作里面的数据。而callback的参数d表示从XML回调过来的所有数据,有了这个参数d,我们就好进行下面的内容了。
行4:通过JavaScript在文档的BODY中动态添加一个标签<h1>,这个是页面的总标题,无关紧要;
行5:同样在BODY中动态添加一个标签<dl>,用来作为包含循环下面的内容容器。(行20会用到)
行7:这一行很重要,因为我们已经说过,回调函数的参数d表示从XML回调的所有数据,现在我们就需要对这些数据进行处理(筛选)和格式化;请注意:这里通过搜寻book标签(tag),然后循环执行each后面的函数,直到xml里面数据的条目完全循环完毕;(有点像PHP里面的foreach函数的功能)
行9:$(this)实际上就创建一个对象,目的是将d的当前一条书籍信息对象实例化,方便进行操作,这就是$book;
行10--行12:分别获取当前对象$book的书籍名称,描述和缩略图;(注意取属性值和取节点值的语法不同)
行14-行18:格式化书籍信息,以便输出;
行20:将格式化后的信息以HTML输出方式输出到文档中。
行22:为了告诉用户我们当前的信息正在从XML中读取,2000毫秒(2秒)后,图片逐渐消失。

Step 3:至此,大功告成。欢迎大家给我留言,共同讨论JQuery的开发和你所碰到的问题,请不吝赐教。另外,请将下载后的文件夹放在WEB环境下运行(IIS或虚拟主机),请不要直接点开运行。

代码打包下载

Javascript 相关文章推荐
js arguments对象应用介绍
Nov 28 Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 Javascript
Jquery检验手机号是否符合规则并根据手机号检测结果将提交按钮设为不同状态
Nov 26 Javascript
jquery uploadify如何取消已上传成功文件
Feb 08 Javascript
关于Vue Webpack2单元测试示例详解
Aug 14 Javascript
react在安卓中输入框被手机键盘遮挡问题的解决方法
Sep 03 Javascript
jQuery zTree插件使用简单教程
Aug 16 jQuery
layer提示框添加多个按钮选择的实例
Sep 12 Javascript
vue实现在v-html的html字符串中绑定事件
Oct 28 Javascript
原生js实现自定义消息提示框
Nov 19 Javascript
vue 数据操作相关总结
Dec 17 Vue.js
详解 TypeScript 枚举类型
Nov 02 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
Dec 15 #Javascript
jQuery 渐变下拉菜单
Dec 15 #Javascript
多浏览器兼容的获取元素和鼠标的位置的js代码
Dec 15 #Javascript
讨论javascript(一)工厂方式 js面象对象的定义方法
Dec 15 #Javascript
查询绑定数据岛的表格中的文本并修改显示方式的js代码
Dec 15 #Javascript
jquery自动完成插件(autocomplete)应用之PHP版
Dec 15 #Javascript
Javascript attachEvent传递参数的办法
Dec 14 #Javascript
You might like
特转载一高手总结PHP学习资源和链接.
2006/12/05 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
ThinkPHP3.2框架自定义配置和加载用法示例
2018/06/14 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
从数据结构分析看:用for each...in 比 for...in 要快些
2013/04/17 Javascript
HTML页面滚动时获取离页面顶部的距离2种实现方法
2013/09/05 Javascript
jQuery中 delegate使用的问题
2015/07/03 Javascript
基于HTML+CSS+JS实现增加删除修改tab导航特效代码
2016/08/05 Javascript
轻松掌握JavaScript享元模式
2016/08/27 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
JS生成和下载二维码的代码
2016/12/07 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
2017/11/22 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
[55:56]NB vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.22
2019/09/05 DOTA
Python中__call__用法实例
2014/08/29 Python
python文件写入实例分析
2015/04/08 Python
Python命令行参数解析模块optparse使用实例
2015/04/13 Python
Python常用时间操作总结【取得当前时间、时间函数、应用等】
2017/05/11 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
python下解压缩zip文件并删除文件的实例
2018/04/24 Python
Python PyCharm如何进行断点调试
2019/07/05 Python
numpy np.newaxis 的实用分享
2019/11/30 Python
如何基于Python按行合并两个txt
2020/11/03 Python
雅萌 (YA-MAN) :日本美容家电领域的龙头企业
2017/05/12 全球购物
美国眼镜网:GlassesUSA
2017/09/07 全球购物
国家地理在线商店:Shop National Geographic
2018/06/30 全球购物
Brasty波兰:香水、化妆品、手表网上商店
2019/04/15 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
英国家具、照明、家居用品网上商店:Wayfair.co.uk
2020/02/13 全球购物
宿舍违规用电检讨书
2014/02/16 职场文书
初中班主任寄语
2014/04/04 职场文书
社区义诊活动总结
2014/04/30 职场文书
班组建设经验交流材料
2014/05/12 职场文书
教师个人工作总结范文2015
2015/10/14 职场文书
一篇合格的广告文案,其主要目的是什么?
2019/07/12 职场文书
Java中Quartz高可用定时任务快速入门
2022/04/03 Java/Android