JQuery读取XML文件数据并显示的实现代码
2009-12-16 13:43
861 查看
准备工作
在开始之前我们需要做如下准备工作:
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>
这里是概况(www.jb51.net)
</description>
</book>
<book title="剑桥雅思6" imageurl="images/ielts.jpg">
<description>
这里是概况(www.jb51.net)
</description>
</book>
<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
这里是概况(www.jb51.net)
</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或虚拟主机),请不要直接点开运行。
代码打包下载
在开始之前我们需要做如下准备工作:
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>
这里是概况(www.jb51.net)
</description>
</book>
<book title="剑桥雅思6" imageurl="images/ielts.jpg">
<description>
这里是概况(www.jb51.net)
</description>
</book>
<book title="Professional ASP.NET" imageurl="images/asp.jpg">
<description>
这里是概况(www.jb51.net)
</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或虚拟主机),请不要直接点开运行。
代码打包下载
您可能感兴趣的文章:
相关文章推荐
- JQuery读取XML文件数据并显示的实现代码
- xml学习(三)---利用xml文件实现数据岛功能(网页显示xml文件中的内容免C#代码操作xml文件)
- JQuery读取XML文件数据并显示
- jQuery利用XMLHttpRequest()和FormData()实现同时上传文件和数据
- JavaScript实现读取与输出XML文件数据的方法示例
- C#.NET示例读写xml所有节点的代码实现方法和读取xml节点的数据总结
- C#.NET示例读写xml所有节点的代码实现方法和读取xml节点的数据总结
- jQuery基于Ajax实现读取XML数据功能示例
- 基于jQuery的输入框无值自动显示指定数据的实现代码
- 《程序实现》从xml、txt文件里读取数据写入excel表格
- 分批读取文件中数据的程序流程及其C代码实现
- 使用jQuery读取XML文件数据
- JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
- 用java代码实现从excel表格读取数据然后写入生成国际化配置文件properties
- 根据ajax发送数据,从servelt中读取xml数据并显示,实现查询、删除和分页
- asp.net 读取并显示excel数据的实现代码
- 使用JQuery读取XML文件数据(转)
- php操作XML、读取数据和写入数据的实现代码
- Qt实现读取显示obj文件——绘制数据
- perl从文件中读取数据并输出的实现代码