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 相关文章推荐
jQuery 行级解析读取XML文件(附源码)
Oct 12 Javascript
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
基于jquery的监控数据是否发生改变
Apr 11 Javascript
JavaScript中的无阻塞加载性能优化方案
Oct 10 Javascript
Jquery基础之事件操作详解
Jun 14 Javascript
ExtJS 4.2 Grid组件单元格合并的方法
Oct 12 Javascript
Angular2+国际化方案(ngx-translate)的示例代码
Aug 23 Javascript
JQuery通过后台获取数据遍历到前台的方法
Aug 13 jQuery
基于Vue实现可以拖拽的树形表格实例详解
Oct 18 Javascript
JS扁平化输出数组的2种方法解析
Sep 17 Javascript
Nuxt.js nuxt-link与router-link的区别说明
Nov 06 Javascript
在js中修改html body的样式
Nov 11 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 什么是PEAR?(第二篇)
2009/03/19 PHP
php多维数组去掉重复值示例分享
2014/03/02 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
使用图灵api创建微信聊天机器人
2015/07/23 PHP
PHP格式化显示时间date()函数代码
2018/10/03 PHP
JavaScript Date对象使用总结
2009/05/14 Javascript
jquery判断小数点两位和自动删除小数两位后的数字
2014/03/19 Javascript
JavaScript组合拼接字符串的效率对比测试
2014/11/06 Javascript
jQuery实现时尚漂亮的弹出式对话框实例
2015/08/07 Javascript
JS动态插入并立即执行回调函数的方法
2016/04/21 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
2017/03/08 Javascript
详解JSON Web Token 入门教程
2018/07/30 Javascript
给localStorage设置一个过期时间的方法分享
2018/11/06 Javascript
vue实现分页组件
2020/06/16 Javascript
vue组件命名和props命名代码详解
2019/09/01 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
Python urllib模块urlopen()与urlretrieve()详解
2013/11/01 Python
python脚本实现数据导出excel格式的简单方法(推荐)
2016/12/30 Python
关于Python 3中print函数的换行详解
2017/08/08 Python
python实现外卖信息管理系统
2018/01/11 Python
Python基于hashlib模块的文件MD5一致性加密验证示例
2018/02/10 Python
完美解决Pycharm无法导入包的问题 Unresolved reference
2018/05/18 Python
Python自然语言处理 NLTK 库用法入门教程【经典】
2018/06/26 Python
Python3 合并二叉树的实现
2019/09/30 Python
python系列 文件操作的代码
2019/10/06 Python
基于Python检测动态物体颜色过程解析
2019/12/04 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
CSS3转换功能transform主要属性值分析及实现分享
2012/05/06 HTML / CSS
CSS3 input框的实现代码类似Google登录的动画效果
2020/08/04 HTML / CSS
品恩科技软件测试面试题
2014/10/26 面试题
kfc实习自我鉴定
2013/12/14 职场文书
端午节活动策划方案
2014/03/09 职场文书
初中学校对照检查材料
2014/08/19 职场文书
介绍信如何写
2015/01/31 职场文书
教师工作证明范本
2015/06/12 职场文书
确保减税降费落地生根,用实实在在措施
2019/07/19 职场文书