设为首页收藏本站关注微信<<< 抵制 IE6 人人有责 >>>
搜索
热搜: 活动 交友 discuz
查看: 2482|回复: 2
打印 上一主题 下一主题

[Jquery] Jquery+XML读取输出学术探讨

[复制链接]
跳转到指定楼层
楼主
发表于 2016-3-19 18:44:58 | 只看该作者 回帖奖励 |正序浏览 |阅读模式
[XML] 纯文本查看 复制代码
<?xml version="1.0" encoding="utf-8" ?> 
<books> 
<book title="藏地密码" imageurl="images/Tibet_Code.jpg"> 
<description> 
这里是概况([url]www.kevin-ying.com[/url]) 
</description> 
</book> 

<book title="剑桥雅思6" imageurl="images/ielts.jpg"> 
<description> 
这里是概况([url]www.kevin-ying.com[/url]) 
</description> 
</book> 

<book title="Professional ASP.NET" imageurl="images/asp.jpg"> 
<description> 
这里是概况([url]www.kevin-ying.com[/url]) 
</description> 
</book> 
</books>
 


准备工作

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

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

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

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

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

正式开始

Step 1:首先让我们看看这个data.xml的简单结构,我这里演示的数据是"Saturn为您推荐的几本书",故为书籍信息,那么xml就包括书籍的名称,缩略图和书籍描述信息;
其次,让我们看看加载在空白HTML文档里面的JavaScript代码:

[JavaScript] 纯文本查看 复制代码
$(document).ready(function() //当HTML文档准备完毕之后(即html和JavaScript都下载完毕),会自动触发JQuery的 $(document).ready方法及里面的过程。显然,这里首先执行的是$.get方法。
{ 
$.get('http://www.kevin-ying.com/data/rss/10.xml', function(d){ //$.get的第一个参数是XML文件的相对路径(注意路径要填写正确,这里我们把XML和网页文件放在同一文件夹)。第二个参数是一个Callback函数,即回调函数。就是说通过get方法来请求这个XML文件的内容,然后通过这个callback回调函数来操作里面的数据。而callback的参数d表示从XML回调过来的所有数据,有了这个参数d,我们就好进行下面的内容了。
$('body').append('<h1> Saturn给你推荐几本书: </h1>'); //通过JavaScript在文档的BODY中动态添加一个标签<h1>,这个是页面的总标题,无关紧要;
$('body').append('<dl />'); //同样在BODY中动态添加一个标签<dl>,用来作为包含循环下面的内容容器。(行20会用到) 
$(d).find('book').each(function(){ //这一行很重要,因为我们已经说过,回调函数的参数d表示从XML回调的所有数据,现在我们就需要对这些数据进行处理(筛选)和格式化;请注意:这里通过搜寻book标签(tag),然后循环执行each后面的函数,直到xml里面数据的条目完全循环完毕;(有点像PHP里面的foreach函数的功能)

var $book = $(this); 
var title = $book.attr("title"); //$(this)实际上就创建一个对象,目的是将d的当前一条书籍信息对象实例化,方便进行操作,这就是$book;
var description = $book.find('description').text(); 
var imageurl = $book.attr('imageurl'); //分别获取当前对象$book的书籍名称,描述和缩略图;(注意取属性值和取节点值的语法不同) 

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)); //将格式化后的信息以HTML输出方式输出到文档中。

$('.loadingPic').fadeOut(2000); //为了告诉用户我们当前的信息正在从XML中读取,2000毫秒(2秒)后,图片逐渐消失。
}); 
}); 
}); 
//至此,大功告成。欢迎大家给我留言,共同讨论JQuery的开发和你所碰到的问题,请不吝赐教。另外,请将下载后的文件夹放在WEB环境下运行(IIS或虚拟主机),请不要直接点开运行。





分享到:  QQ好友和群QQ好友和群 QQ空间QQ空间 腾讯微博腾讯微博 腾讯朋友腾讯朋友
收藏收藏 转播转播 分享淘帖
回复

使用道具 举报

板凳
 楼主| 发表于 2016-3-19 19:37:19 | 只看该作者
上述代码下载:
链接:http://pan.baidu.com/s/1hr1cdm8 密码:po0j
解压密码: kevin-ying.com
回复 支持 反对

使用道具 举报

沙发
 楼主| 发表于 2016-3-19 18:48:31 | 只看该作者
上述JS纯html代码
[HTML] 纯文本查看 复制代码
<script src="http://www.kevin-ying.com/jq/jquery-2.1.4.min.js"></script>
<script>
$(document).ready(function() 
{ 
$.get('/data/rss/10.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); 
}); 
}); 
}); 
</script>

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 免费注册

本版积分规则

QQ|手机版|Archiver|源于生活(个人生活娱乐工作的笔记)css3,html5,学习笔记    

GMT+8, 2024-11-1 08:38 , Processed in 0.109200 second(s), 29 queries .

Powered by Mr.Kevin-ying

© 2004-2015

快速回复 返回顶部 返回列表