jQuery 解析xml文件
更新時間：2009年08月09日 00:37:08 作者：
jQuery 解析xml文件實現(xiàn)腳本代碼，用到了jquery如何解析xml文件，和大家分享一下
復制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>jquery xml解析</title>
<script src="jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$.ajax({url:"City.xml",
success:function(xml){
$(xml).find("province").each(function(){
var t = $(this).attr("name");//this->
$("#DropProvince").append("<option>"+t+"</option>");
});
}
});
$("#DropProvince").change(function(){
$("#sCity>option").remove();
var pname = $("#DropProvince").val();
$.ajax({url:"City.xml",
success:function(xml){
$(xml).find("province[name='"+pname+"']>city").each(function(){
$("#sCity").append("<option>"+$(this).text()+"</option>");
});
}
});
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<select id="DropProvince" style="width:60px;">
<option>請選擇</option>
</select>
<select id="sCity" style="width:60px;">
</select>
</div>
</form>
</body>
</html>
city.xml文件
復制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8" ?>
<provinces>
<province name="湖北">
<city>武漢</city>
<city>黃石</city>
<city>宜昌</city>
<city>天門</city>
</province>
<province name="湖南">
<city>邵陽</city>
<city>長沙</city>
<city>岳陽</city>
</province>
<province name="廣東">
<city>廣州</city>
<city>深圳</city>
</province>
</provinces>
其實主要是注意怎樣在html界面上解析xml文件，格式就是
復制代碼 代碼如下:
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
url: "City.xml",
success: function (xml) {
$(xml).find("province").each(function () {
var t = $(this).attr("name");
$("#DropProvince").append("<option>" + t + "</option>");
});
}
});
$("#DropProvince").change(function () {
$("#sCity>option").remove();
var pname = $("#DropProvince").val();
$.ajax({
url: "City.xml",
success: function (xml) {
$(xml).find("province[name='"+pname+"']>city").each(function(){
$("#sCity").append("<option>"+$(this).text()+"</option>");
});
}
});
});
});
</script>
就是用$.ajax()調用xml文件的內容。然后$.each()進行循環(huán)操作，基本思想就是這樣的，成功之后去執(zhí)行success這個回調函數(shù)。這里的xml文件是用來存儲數(shù)據(jù)的，相當于在數(shù)據(jù)庫中讀取文件。
相關文章
jQuery開源組件BootstrapValidator使用詳解
這篇文章主要為大家詳細介紹了jQuery開源組件BootstrapValidator的使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-06-06
jQuery實現(xiàn)點擊任意位置彈出層外關閉彈出層效果
在之前做項目的時候經(jīng)常會在主頁面上點擊某個按鈕，右側彈出一個div輸出對應內容的詳細信息，怎么實現(xiàn)的呢，今天小編給大家分享通過jquery實現(xiàn)點擊任意位置彈出層外關閉彈出層效果，感興趣的朋友一起看看吧2016-10-10
這篇文章主要介紹了jQuery基于正則表達式的表單驗證功能,包括針對字符串、郵件、網(wǎng)址、電話等常見正則驗證操作技巧,需要的朋友可以參考下2017-01-01
jquery 關于圖形報表的運用實現(xiàn)代碼，需要的朋友可以參考下。2011-01-01
jQuery函數(shù)map()和each()介紹及異同點分析
這篇文章主要介紹了jQuery函數(shù)map()和each()介紹及異同點分析,需要的朋友可以參考下2014-11-11
用jquery解析JSON數(shù)據(jù)的方法,作為jquery異步請求的傳輸對象，jquery請求后返回的結果是json對象,這里考慮的都是服務器返回JSON形式的字符串的形式，對于利用JSONObject等插件封裝的JSON對象，與此亦是大同小異，這里不再做說明2015-03-03
這篇文章主要介紹了jquery日歷控件實現(xiàn)方法，網(wǎng)上有好多這樣的插件，下面是自己實現(xiàn)的一個方法,需要的朋友可以參考下2014-03-03
這篇文章主要介紹了jquery合并表格中相同文本的相鄰單元格的相關資料,需要的朋友可以參考下2015-07-07
這篇文章主要介紹了Jquery修改頁面標題title其它JS失效的解決方法,很簡單，很實用，需要的朋友可以參考下2014-10-10
前面有個例子是使用jQuery的datatable插件來實現(xiàn)的能夠展開個詳細信息表的樣子。事實上.net的數(shù)據(jù)展示模式很好,如果配上jQuery的那些效果和AJAX功能是相當?shù)貌诲e。2009-09-09