本文的主要内容有:
1、ajax加载XML文件
2、XML文件格式
3、jQuery循环( $(xml).find("#tag").each(function(){ ... }) )
4、jQuery动态加载标签
.find("#tag")方法获得当前元素集合中每个元素的后代,通过选择器、jQuery 对象或元素来筛选。
.each(functin(){ ... })方法规定为每个匹配元素规定运行的函数。
.aspx页面
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxGetXML.aspx.cs" Inherits="AjaxGetXML" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$("#btnXml").click(function () {
$("#tb tr:gt(0)").remove();//在加载时先清除之前加载的数据(全新加载)
$.ajax({
cache: false, //是否读缓存
url: "XMLFile.xml", //进行处理的 XML文件
dataType: "xml", //预期返回类型为 XML
success: function (xml) {
$(xml).find("user").each(function () { //user为节点标识 之后如 id为此节点标识下的子节点
var idValue = $(this).children("id").text(); //取 id 节点的文本
var nameValue = $(this).children("name").text();
var pwdValue = $(this).children("pwd").text();
var td = "<tr><td>" + idValue + "</td><td>" + nameValue + "</td><td>" + pwdValue + "</td></tr>"; //拼 tr 值
$("#loadXml #tb").append(td);
});
},
error: function () {
alert("加载XML数据失败!");
}
})
})
})
</script>
</head>
<body>
<input type="button" id="btnXml" value="加载XML数据" />
<form id="form1" runat="server">
<div id="loadXml">
<table id="tb">
<tr><th>序号</th><th>用户名</th><th>密码</th></tr>
</table>
</div>
</form>
<div>
<pre>
本文的主要内容有:
1、ajax加载XML文件
2、XML文件格式
3、jQuery循环( $(xml).find("#tag").each(function(){ ... }) )
4、jQuery动态加载标签
</pre>
</div>
</body>
</html>
XMLFile.xml页面
<?xml version="1.0" encoding="UTF-8"?>
<userlist>
<user email="aaa@tt.com">
<id>1</id>
<name>张三</name>
<pwd>zhangsan</pwd>
</user>
<user email="bbb@tt.com">
<id>2</id>
<name>李四</name>
<pwd>lisi</pwd>
</user>
<user email="ccc@tt.com">
<id>3</id>
<name>王五</name>
<pwd>wangwu</pwd>
</user>
<user email="ddd@tt.com">
<id>4</id>
<name>赵六</name>
<pwd>zhaoliu</pwd>
</user>
</userlist>