jQuery解析xml檔詳解

這次帶給大家jQuery解析xml檔詳解，jQuery解析xml檔的注意事項有哪些，下面就是實戰案例，一起來看一下。

 
 
<title>jquery xml解析</title> 
<script javascript></script> 
<script> 
$(
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+""); 
}); 
} 
}); 
$("#DropProvince").change(function(){ 
$("#sCity>option").remove(); 
var pname = $("#DropProvince").val(); 
$.ajax({url:"City.xml", 
success:function(xml){ 
$(xml).find("province[name=&#39;"+pname+"&#39;]>city").each(function(){ 
$("#sCity").append("<option>"+$(this).text()+""); 
}); 
} 
}); 
}); 
}); 
</script> 
 
 

 

    请选择       

 

   

city.xml文件

<?xml  version="1.0" encoding="utf-8" ?> 
<provinces> 
<province> 
<city>武汉</city> 
<city>黄石</city> 
<city>宜昌</city> 
<city>天门</city> 
</province> 
<province> 
<city>邵阳</city> 
<city>长沙</city> 
<city>岳阳</city> 
</province> 
<province> 
<city>广州</city> 
<city>深圳</city> 
</province> 
</provinces>

其實主要是注意怎麼在html介面上解析xml文件，格式就是

<script> 
$(document).ready(function () { 
$.ajax({ 
url: "City.xml", 
success: function (xml) { 
$(xml).find("province").each(function () { 
var t = $(this).attr("name"); 
$("#DropProvince").append("<option>" + t + ""); 
}); 
} 
}); 
$("#DropProvince").change(function () { 
$("#sCity>option").remove(); 
var pname = $("#DropProvince").val(); 
$.ajax({ 
url: "City.xml", 
success: function (xml) { 
$(xml).find("province[name=&#39;"+pname+"&#39;]>city").each(function(){ 
$("#sCity").append("<option>"+$(this).text()+""); 
}); 
} 
}); 
}); 
}); 
</script>

就是用$.ajax()呼叫xml檔的內容。然後$.each()進行循環操作，基本思想就是這樣的，成功之後去執行success這個回呼函數。這裡的xml檔是用來儲存資料的，相當於在資料庫中讀取檔案。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

Jquery LigerUI實作檔案上傳步驟詳解

jQuery怎麼讀取XML檔案內容

#

以上是jQuery解析xml檔詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！