jQuery 解析xml文件
更新時(shí)間:2009年08月09日 00:37:08 作者:
jQuery 解析xml文件實(shí)現(xiàn)腳本代碼,用到了jquery如何解析xml文件,和大家分享一下
復(fù)制代碼 代碼如下:
<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>請(qǐng)選擇</option>
</select>
<select id="sCity" style="width:60px;">
</select>
</div>
</form>
</body>
</html>
city.xml文件
復(fù)制代碼 代碼如下:
<?xml version="1.0" encoding="utf-8" ?>
<provinces>
<province name="湖北">
<city>武漢</city>
<city>黃石</city>
<city>宜昌</city>
<city>天門</city>
</province>
<province name="湖南">
<city>邵陽(yáng)</city>
<city>長(zhǎng)沙</city>
<city>岳陽(yáng)</city>
</province>
<province name="廣東">
<city>廣州</city>
<city>深圳</city>
</province>
</provinces>
其實(shí)主要是注意怎樣在html界面上解析xml文件,格式就是
復(fù)制代碼 代碼如下:
<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()調(diào)用xml文件的內(nèi)容。然后$.each()進(jìn)行循環(huán)操作,基本思想就是這樣的,成功之后去執(zhí)行success這個(gè)回調(diào)函數(shù)。這里的xml文件是用來存儲(chǔ)數(shù)據(jù)的,相當(dāng)于在數(shù)據(jù)庫(kù)中讀取文件。
您可能感興趣的文章:
- JQuery解析HTML、JSON和XML實(shí)例詳解
- jQuery+ajax讀取并解析XML文件的方法
- 使用jquery解析XML的方法
- jQuery 行級(jí)解析讀取XML文件(附源碼)
- JQuery解析XML數(shù)據(jù)的幾個(gè)簡(jiǎn)單實(shí)例
- jquery解析XML字符串和XML文件的方法說明
- jQuery解析返回的xml和json方法詳解
- 用JQuery 實(shí)現(xiàn)AJAX加載XML并解析的腳本
- Jquery Ajax解析XML數(shù)據(jù)(同步及異步調(diào)用)簡(jiǎn)單實(shí)例
- JQuery解析XML的方法小結(jié)
- jQuery實(shí)現(xiàn)的解析本地 XML 文檔操作示例
相關(guān)文章
jQuery開源組件BootstrapValidator使用詳解
這篇文章主要為大家詳細(xì)介紹了jQuery開源組件BootstrapValidator的使用方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-06-06
jQuery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果
在之前做項(xiàng)目的時(shí)候經(jīng)常會(huì)在主頁(yè)面上點(diǎn)擊某個(gè)按鈕,右側(cè)彈出一個(gè)div輸出對(duì)應(yīng)內(nèi)容的詳細(xì)信息,怎么實(shí)現(xiàn)的呢,今天小編給大家分享通過jquery實(shí)現(xiàn)點(diǎn)擊任意位置彈出層外關(guān)閉彈出層效果,感興趣的朋友一起看看吧2016-10-10
jQuery基于正則表達(dá)式的表單驗(yàn)證功能示例
這篇文章主要介紹了jQuery基于正則表達(dá)式的表單驗(yàn)證功能,包括針對(duì)字符串、郵件、網(wǎng)址、電話等常見正則驗(yàn)證操作技巧,需要的朋友可以參考下2017-01-01
jquery關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼
jquery 關(guān)于圖形報(bào)表的運(yùn)用實(shí)現(xiàn)代碼,需要的朋友可以參考下。2011-01-01
jQuery函數(shù)map()和each()介紹及異同點(diǎn)分析
這篇文章主要介紹了jQuery函數(shù)map()和each()介紹及異同點(diǎn)分析,需要的朋友可以參考下2014-11-11
Jquery修改頁(yè)面標(biāo)題title其它JS失效的解決方法
這篇文章主要介紹了Jquery修改頁(yè)面標(biāo)題title其它JS失效的解決方法,很簡(jiǎn)單,很實(shí)用,需要的朋友可以參考下2014-10-10
JQuery的ajax基礎(chǔ)上的超強(qiáng)GridView展示
前面有個(gè)例子是使用jQuery的datatable插件來實(shí)現(xiàn)的能夠展開個(gè)詳細(xì)信息表的樣子。事實(shí)上.net的數(shù)據(jù)展示模式很好,如果配上jQuery的那些效果和AJAX功能是相當(dāng)?shù)貌诲e(cuò)。2009-09-09

