使用JQuery读取XML文件数据(转)

通过JQuery框架为空白HTML文档加载

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

1.创建一个名为DEMO.html空白html文件；（推荐使用Editplus 3创建）

2.熟悉JQuery框架的基本语法；（不熟悉没关系，后面我会注释得很详细）

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

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

从XML文件读取的数据。我们将会主要用到JQuery自带函数 $.get 。

正式开始：

Step 1:首先让我们看看这个data.xml的简单结构，我这里演示的数据是"Saturn为您推荐的几本书"，故为书籍信息，那么xml就包括书籍的名称，缩略图和书籍描述信息；

<?xml version="1.0" encoding="utf-8" ?> <books> <book title="藏地密码" imageurl="images/Tibet_Code.jpg"> <description> 这里是概况(www.huyang8.com) </description> </book> <book title="剑桥雅思6" imageurl="images/ielts.jpg"> <description> 这里是概况(www.huyang8.com) </description> </book> <book title="Professional ASP.NET" imageurl="images/asp.jpg"> <description> 这里是概况(www.huyang8.com) </description> </book> </books>

$(document).ready(function() header("Content-Type:text/xml"); //php response.ContentType="text/xml" //asp response.setHeader("ContentType","text/xml"); //jsp (我上次这没写,结果返回 是一个 "" )

<?xml version="1.0" encoding="UTF-8"?> <name>zhangsan</name> <id>1</id> <name>lisi</name> <id>2</id>

正确的

<?xml version="1.0" encoding="UTF-8"?> <stulist> <student mailto:1@1.com" target=_blank>1@1.com"> <name>zhangsan</name> <id>1</id> </student> <student mailto:2@2.com" target=_blank>2@2.com"> <name>lisi</name> <id>2</id> </student> </stulist>

3,解析
遍历student（这里还是用上面那个XML，子节点是student)

$.ajax(...{ url:'ajax.jsp', type: 'GET', dataType: 'xml', timeout: 1000, error: function(xml)...{ alert('Error loading XML document'+xml); }, success: function(xml)...{ $(xml).find("student").each(function(i)...{ var id=$(this).children("id"); //取对象 var id_value=$(this).children("id").text(); //取文本 或者 $("id" , xml).text(); alert(id_value);//这里就是ID的值了。 alert($(this).attr("email")); //这里能显示student下的email属性。 $('<li></li>').html(id_value).appendTo('ol');

}); } });