jquery 读取xml
Code<%@ 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">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jQuery与XML</title>
<style type="text/css">
.datalist{
border:1px solid #744011; /* 表格边框 */
font-family:Arial;
border-collapse:collapse; /* 边框重叠 */
background-color:#ffd2aa; /* 表格背景色 */
font-size:14px;
}
.datalist th{
border:1px solid #744011; /* 行名称边框 */
background-color:#a16128; /* 行名称背景色 */
color:#FFFFFF; /* 行名称颜色 */
font-weight:bold;
padding-top:4px; padding-bottom:4px;
padding-left:12px; padding-right:12px;
text-align:center;
}
.datalist td{
border:1px solid #744011; /* 单元格边框 */
text-align:left;
padding-top:4px; padding-bottom:4px;
padding-left:10px; padding-right:10px;
}
.datalist tr:hover, .datalist tr.altrow{
background-color:#dca06b; /* 动态变色 */
}
input{ /* 按钮的样式 */
border:1px solid #744011;
color:#744011;
}
</style>
<script src="jquery-1.3.2.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
function getXML(addressXML){
$.ajax({
type: "GET",
url: addressXML,
dataType: "xml", //大小写敏感
success: function(myXML){
//each遍历每个<member>标记
$(myXML).find("member").each(
function(){
var oMember = "", sName = "", sClass = "", sBirth = "", sConstell = "", sMobile = "";
sName = $(this).find("name").text();
sClass = $(this).find("class").text();
sBirth = $(this).find("birth").text();
sConstell = $(this).find("constell").text();
sMobile = $(this).find("mobile").text();
//然后添加行
$("#member").append($("<tr><td>"+sName+"</td><td>"+sClass+"</td><td>"+sBirth+"</td><td>"+sConstell+"</td><td>"+sMobile+"</td></tr>"));
}
);
}
});
}
</script>
</head>
<body>
<form id="form1" runat="server">
<input type="button" value="获取XML" onclick="getXML('XMLFile.xml');"/><br/><br/>
<table class="datalist" summary="list of members in EE Studay" id="member">
<tr>
<th scope="col">Name</th>
<th scope="col">Class</th>
<th scope="col">Birthday</th>
<th scope="col">Constellation</th>
<th scope="col">Mobile</th>
</tr>
</table>
</form>
</body>
</html>
Code<?xml version="1.0" encoding="gb2312"?>
<list>
<caption>Member List</caption>
<member>
<name>isaac</name>
<class>W13</class>
<birth>Jun 24th</birth>
<constell>Cancer</constell>
<mobile>1118159</mobile>
</member>
<member>
<name>fresheggs</name>
<class>W610</class>
<birth>Nov 5th</birth>
<constell>Scorpio</constell>
<mobile>1038818</mobile>
</member>
<member>
<name>girlwing</name>
<class>W210</class>
<birth>Sep 16th</birth>
<constell>Virgo</constell>
<mobile>1307994</mobile>
</member>
<member>
<name>tastestory</name>
<class>W15</class>
<birth>Nov 29th</birth>
<constell>Sagittarius</constell>
<mobile>1095245</mobile>
</member>
</list>
浙公网安备 33010602011771号