第一種方案：
| 代碼如下 |
複製代碼 |
<script type="text/javascript">
$(document).ready(function() {
$.ajax({
url: '/cgi/test.xml',
dataType: 'xml',
success: function(data){
//console.log(data);
$(data).find("channel").find("item").each(function(index, ele) {
var titles = $(ele).find("title").text();
var links = $(ele).find("link").text();
console.log(titles+'-----');
$("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
});
}
});
})
</script> <div id="noticecon">
<ol>
</ol>
</div> |
第二種方案：
| 代碼如下 |
複製代碼 |
<script type="text/javascript">
$.get("/cgi/test.xml", function(data){
$(data).find('channel').find('item').each(function(index, ele){
var titles = $(ele).find('title').text();
var links = $(ele).find('link').text();
$("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
})
});
</script> <div id="noticecon">
<ol>
</ol>
</div> |
一般步驟如下：
| 代碼如下 |
複製代碼 |
$.get("xmlfile.xml",function(xml){
//xml即為可以讀取使用的內容，具體讀取見第2點
}); |
2. 讀取xml內容
如果讀取的xml是來於xml檔案，這結合上面的那點，處理如下：
| 代碼如下 |
複製代碼 |
$.get("xmlfile.xml",function(xml){
//xml即為可以讀取使用的內容，具體讀取見第2點
}); |
如果讀取的是xml字串，則要注意一點，xml字串的必然被"<xml>"和"</xml>"包圍才可以被解析
| 代碼如下 |
複製代碼 |
$("<xml><root><item></item></root></xml>").find("item").length; |
解析xml內容：
樣本xml：
| 代碼如下 |
複製代碼 |
<?xml version="1.0" encoding="utf-8" ?>
<fields>
<field Name="Name1">
<fieldname>dsname</fieldname>
<datatype>字元</datatype>
</field>
<field Name="Name2">
<fieldname>dstype</fieldname>
<datatype>字元</datatype>
</field>
</fields> |
以下是解析範例程式碼：
| 代碼如下 |
複製代碼 |
$(xml).find("field").each(function() {
var field = $(this);
var fName = field.attr("Name");//讀取節點屬性
var dataType = field.find("datatype").text();//讀取子節點的值
}); |
下面看個簡單一實例
| 代碼如下 |
複製代碼 |
XMLFile.xml
<?xml version="1.0" encoding="utf-8" ?>
<msglist>
<msg name="11">
<id>1</id>
<content>content1</content>
</msg>
<msg name="22">
<id>2</id>
<content>content2</content>
</msg>
</msglist>
jqXmlFirst.aspx
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jqXmlFirst.aspx.cs" Inherits="jqueryXml_jqXmlFirst" %>
<!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>
<script type="text/javascript" src="../js/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"XMLFile.xml",
dataType:"xml",
error: function(xml){
alert('Error loading XML document'+xml);
},
success:function(xml){
$(xml).find("msglist > msg").each(function(){
alert($(this).find("content").text());//each是迴圈執行，即多次彈出。
alert($(this).attr("name"));//取得屬性的方法
});
}
})
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>
</html>
|
