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 相关文章推荐
JSON辅助格式化处理方法
Mar 26 Javascript
深入理解JavaScript中的传值与传引用
Dec 09 Javascript
JS+CSS实现的拖动分页效果实例
May 11 Javascript
JavaScript实现的经典文件树菜单效果
Sep 08 Javascript
AngularJS开发教程之控制器之间的通信方法分析
Dec 25 Javascript
微信小程序实现鼠标拖动效果示例
Dec 01 Javascript
监听element-ui table滚动事件的方法
Mar 26 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
vue3.0中友好使用antdv示例详解
Jan 05 Vue.js
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缓存技术的多种方法小结
2012/08/14 PHP
解析php入库和出库
2013/06/25 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP PDOStatement::setAttribute讲解
2019/02/01 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
基于BootStrap的Metronic框架实现页面链接收藏夹功能按钮移动收藏记录(使用Sortable进行拖动排序)
2016/08/29 Javascript
微信小程序 参数传递实例代码
2017/03/20 Javascript
vue通过路由实现页面刷新的方法
2018/01/25 Javascript
详解vue-cli项目中怎么使用mock数据
2018/05/29 Javascript
Vue匿名插槽与作用域插槽的合并和覆盖行为
2019/04/22 Javascript
javascript实现5秒倒计时并跳转功能
2019/06/20 Javascript
详解React 条件渲染
2020/07/08 Javascript
vue中解决微信html5原生ios虚拟键返回不刷新问题
2020/10/20 Javascript
python字典排序实例详解
2015/05/20 Python
Python正则表达式完全指南
2017/05/25 Python
Python实现感知机(PLA)算法
2017/12/20 Python
Python实现的rsa加密算法详解
2018/01/24 Python
python查询mysql,返回json的实例
2018/03/26 Python
python3.4控制用户输入与输出的方法
2018/10/17 Python
python 字典 setdefault()和get()方法比较详解
2019/08/07 Python
python3中使用__slots__限定实例属性操作分析
2020/02/14 Python
python IDLE添加行号显示教程
2020/04/25 Python
简述python&amp;pytorch 随机种子的实现
2020/10/07 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
夜班门卫岗位职责
2013/12/09 职场文书
户外拓展活动方案
2014/02/11 职场文书
人民教师的自我评价分享
2014/02/21 职场文书
人力资源经理的岗位职责范本
2014/02/28 职场文书
新年团拜会主持词
2014/04/02 职场文书
2015年党员自评材料
2014/12/17 职场文书
2015年底工作总结范文
2015/05/15 职场文书
副校长2015年教育教学工作总结
2015/07/27 职场文书
《桂花雨》教学反思
2016/02/19 职场文书
会议承办单位欢迎词
2019/07/09 职场文书
导游词之湖北梁子湖
2019/11/07 职场文书