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 相关文章推荐
解析arp病毒背后利用的Javascript技术附解密方法
Aug 06 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
jQuery元素的隐藏与显示实例
Jan 20 Javascript
jQuery简单实现title提示效果示例
Aug 01 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
Apr 22 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
详解vue-meta如何让你更优雅的管理头部标签
Jan 18 Javascript
antd Upload 文件上传的示例代码
Dec 14 Javascript
node.js中module模块的功能理解与用法实例分析
Feb 14 Javascript
微信小程序实现弹框效果
May 26 Javascript
如何配置vue.config.js 处理static文件夹下的静态文件
Jun 19 Javascript
Vue如何循环提取对象数组中的值
Nov 18 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 使用curl提交json格式数据
2013/06/29 PHP
ThinkPHP中limit()使用方法详解
2016/04/19 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP实现的日历功能示例
2018/09/01 PHP
PHP使用redis位图bitMap 实现签到功能
2019/10/08 PHP
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
检查输入的是否是数字使用keyCode配合onkeypress事件
2014/01/23 Javascript
jQuery1.9.1针对checkbox的调整方法(prop)
2014/05/01 Javascript
Visual Studio中js调试的方法图解
2014/06/30 Javascript
Nodejs中的this详解
2016/03/26 NodeJs
实例详解Node.js 函数
2018/06/10 Javascript
微信小程序使用gitee进行版本管理
2018/09/20 Javascript
详解vuex的简单todolist例子
2019/07/14 Javascript
Vue 按照创建时间和当前时间显示操作(刚刚,几小时前,几天前)
2020/09/10 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
Python实现希尔排序算法的原理与用法实例分析
2017/11/23 Python
Python Flask基础教程示例代码
2018/02/07 Python
django反向解析和正向解析的方式
2018/06/05 Python
Django框架验证码用法实例分析
2019/05/10 Python
pyhton中__pycache__文件夹的产生与作用详解
2019/11/24 Python
pycharm 关掉syntax检查操作
2020/06/09 Python
python 第三方库paramiko的常用方式
2021/02/20 Python
使用Html5实现异步上传文件,支持跨域,带有上传进度条
2016/09/17 HTML / CSS
美国第二大团购网站:LivingSocial
2016/07/24 全球购物
简述安装Slackware Linux系统的过程
2012/05/08 面试题
人力资源行政经理自我评价
2013/10/23 职场文书
初三化学教学反思
2014/01/23 职场文书
个人现实表现材料
2014/02/04 职场文书
群众路线学习心得体会范文
2014/11/05 职场文书
2014年英语工作总结
2014/12/20 职场文书
先进个人申报材料
2014/12/30 职场文书
安徽导游词
2015/02/12 职场文书
2015暑假实习报告范文
2015/07/13 职场文书
Django实现翻页的示例代码
2021/05/24 Python
为什么MySQL8新特性会修改自增主键属性
2022/04/18 MySQL