使用JQuery加载XML文件中的数据【附源码下载】

需要准备的XML文件Student.xml

<?xml version="1.0" encoding="gb2312"?>

<list>

<caption>student List</caption>

<address>北京市海淀区</address>

</student>

<address>大连市软件园</address>

</student>

<address>上海张江高科</address>

</student>

<address>深圳南山软件园</address>

</student>

</list>

方式1：利用jQuery.ajax()

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function getXML(xmlDataUrl) {

//通过 HTTP 请求加载远程数据。

$.ajax({

type: "GET", //请求方式默认为 "GET"。

url: xmlDataUrl, //发送请求的地址默认为当前页地址

dataType: "xml", //预期服务器返回的数据类型。

success: function(myXML) { //请求成功后的回调函数。

$(myXML).find("student").each(

function() {

//获得数据

var strName = $(this).find("name").text();

var strSex = $(this).find("sex").text();

var strAddress = $(this).find("address").text();

var strTelephone = $(this).find("telephone").text();

var strHtml = "<tr>";

strHtml += "<td>" + strName + "</td>";

strHtml += "<td>" + strSex + "</td>";

strHtml += "<td>" + strAddress + "</td>";

strHtml += "<td>" + strTelephone + "</td>";

strHtml += "</tr>";

//输出到表格

$("#stuList").append($(strHtml));

}

);

}

});

}

</script>

</head>

<body>

<div>

<tr>

</tr>

</table>

</div>

</body>

</html>

方式2：利用jQuery.get()

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

function getXML(xmlDataUrl) {

//这是一个简单的 GET 请求功能以取代复杂 $.ajax

$.get(xmlDataUrl, function(data) {

$(data).find('student').each(function() {

//获得数据

var strName = $(this).find("name").text();

var strSex = $(this).find("sex").text();

var strAddress = $(this).find("address").text();

var strTelephone = $(this).find("telephone").text();

var strHtml = "<tr>";

strHtml += "<td>" + strName + "</td>";

strHtml += "<td>" + strSex + "</td>";

strHtml += "<td>" + strAddress + "</td>";

strHtml += "<td>" + strTelephone + "</td>";

strHtml += "</tr>";

//输出到表格

$("#stuList").append($(strHtml));

});

}

</script>

</head>

<body>

<div>

<tr>

</tr>

</table>

</div>

</body>

</html>

运行结果：以上两种方式运行结果是一样的

代码分析:

方式1：

jQuery.ajax([options])通过 HTTP 请求加载远程数据。jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。此处使用方式

$.ajax({

type: "GET", //请求方式默认为 "GET"。

url: xmlDataUrl, //发送请求的地址默认为当前页地址

dataType: "xml", //预期服务器返回的数据类型。

success: function(data) { //请求成功后的回调函数。

}

})

success请求成功后的回调函数。data 能是 xmlDoc, jsonObj, html, text等等

方式2：

jQuery.get(url, [data], [callback], [type]) 通过远程 HTTP GET 请求载入信息。这是一个简单的 GET 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

此处使用方式

$.get(url, function(data) {

})

参数1待载入页面的URL地址

参数2载入成功时回调函数。

另外，如果需要传入参数，用如下类似方式

$.get(url, { name: "John", age: "28" },function(data) {

})

注意：

在for().each()循环XML元素中，如果要找到元素内容，利用find(‘元素名’)形式，如上面的

var strAddress = $(this).find("address").text();

如果要找元素的属性，利用此元素对象的attr属性。例如果上例中address增加了country属性：

<address country="China">北京市海淀区</address>

如果既要获得地址又要获得国家，以上代码改为如下形式

var strAddress = $(this).find("address").text() + $(this).find("address").attr("country");

$(this).find("address").attr("country")获得address节点上的country属性

另外在网上找到一篇类似的文章，作为扩展阅读

使用JQuery动态加载XML文件数据

快速导读

今天向大家演示如何通过JQuery框架为空白HTML文档加载从XML文件读取的数据。我们将会主要用到JQuery自带函数 $.get 。

准备工作

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

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

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

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

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

正式开始：

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

<?xml version="1.0" encoding="utf-8" ?>

<books>

这里是概况(www.huyang8.com)

</description>

</book>

这里是概况(www.huyang8.com)

</description>

</book>

<book title="Profession

使用JQuery加载XML文件中的数据【附源码下载】

相关推荐