JQuery读取XML文件数据并显示
2009-09-08 17:13
459 查看
xml代码:
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秒)后,图片逐渐消失。
转载地址:http://www.code52.net/page/JS/js200809_22_20.html
<?xml version="1.0" encoding="utf-8" ?> <books> <book title="藏地密码" imageurl="images/Tibet_Code.jpg"> <description> 这里是概况(www.code52.net) </description> </book> <book title="剑桥雅思6" imageurl="images/ielts.jpg"> <description> 这里是概况(www.code52.net) </description> </book> <book title="Professional ASP.NET" imageurl="images/asp.jpg"> <description> 这里是概况(www.code52.net) </description> </book> </books>
Jquery代码:
$(document).ready(function() { $.get('XMLFile.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 + '" mce_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); }); }); });
代码原理与运行流程介绍:
行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秒)后,图片逐渐消失。
转载地址:http://www.code52.net/page/JS/js200809_22_20.html
相关文章推荐
- JQuery读取XML文件数据并显示的实现代码
- JQuery读取XML文件数据并显示的实现代码
- 使用JQuery读取XML文件数据(转)
- JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
- JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)
- [转]使用JQuery读取XML文件数据
- jquery-ajax请求action读取oracle数据库clob字段xml数据格式化显示(struts2)
- JS读取XML文件数据并以table显示数据(兼容IE火狐)
- 使用jQuery读取XML文件数据
- [数据存储之四]XML文件读取
- Xcode9学习笔记74 - 读取和解析Plist属性列表文件(获取远程服务器信息并显示返回数据)
- Jquery-easyui中的datagrid插件读取数据库中得数据并显示
- xml文件处理的好工具--读取数据篇--cnjsp.org
- 使用dataview组件显示服务器端xml文件数据
- PHP 操作 XML 文件 - 读取、显示
- jQuery利用XMLHttpRequest()和FormData()实现同时上传文件和数据
- 从XML文件中读取数据绑定到DropDownList-.Net编程教程
- PHP读取XML文件数据
- 读取、显示、插入xml文件
- 本文介绍了如何从XML文件中读取数据绑定到DropDownList。