JS與jQ讀取xml文件的方法
更新時(shí)間：2015年12月08日 09:11:11 作者：NullAndVoidButAlive
本文通過代碼實(shí)例給大家講解js讀取xml文件及jq讀取xml文件的方法，對本文感興趣的朋友一起學(xué)習(xí)吧
廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
jquery讀取xml文件
<!DOCTYPE html PUBLIC "-//WC//DTD XHTML . Transitional//EN" "http://www.w.org/TR/xhtml/DTD/xhtml-transitional.dtd">
<html xmlns="http://www.w.org//xhtml">
<head>
<title>jQuery 讀取XML文件-jQuery學(xué)習(xí)</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-" />
<style type="text/css">
h{color:Green;text-align:center;}
body{ background-color:#EEEEEE ; font-family:微軟雅黑; }
#showresult{width:px;overflow:hidden;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/../jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#read").click(function () {
$.ajax({
//請求方式為get
type: "GET",
//xml文件位置
url: "sitemap.xml",
//返回?cái)?shù)據(jù)格式為xml
dataType: "xml",
//請求成功完成后要執(zhí)行的方法
success: function (xml) {
$(xml).find("url").each(function (i) {
//i從開始，累加，如果要顯示所有數(shù)據(jù)，將判斷去除即可
if (i < ) {
//鏈接地址
var location = $(this).find("loc").text();
//顯示文字
var text = $(this).find("loc").text();
//動態(tài)加載方法:鏈接地址
$("<a>").attr("href", location)
//顯示文字
.text(text)
//設(shè)置樣式
.css({ "width": "px", "float": "left", "margin-bottom": "px" })
//加載到div
.appendTo("#showresult");
}
})
}
});
return false;
});
});
</script>
</head>
<body>
<div id="showresult">
<h>jQuery讀取XML文件</h>
<a id="read" href="#" style="width:px;">點(diǎn)擊讀取XML</a>
</div>
</body>
</html>
js讀取xml文件
<div id="blog_content" class="blog_content"><p><span style="color:#ff0000;">city.xml 文件</span></p><p><?xml version="1.0" encoding="UTF-8"?>
<root name="中國">
<province name="請選擇省" postcode="100000" >
<city name="請選擇市" postcode="100100" >
<area name="請選擇區(qū)" postcode="100101" />
</city>
</province>
<province name="北京市" postcode="110000" >
<city name="市轄區(qū)" postcode="110100" >
<area name="東城區(qū)" postcode="110101" />
<area name="西城區(qū)" postcode="110102" />
<area name="崇文區(qū)" postcode="110103" />
<area name="宣武區(qū)" postcode="110104" />
<area name="朝陽區(qū)" postcode="110105" />
<area name="豐臺區(qū)" postcode="110106" />
<area name="石景山區(qū)" postcode="110107" />
<area name="海淀區(qū)" postcode="110108" />
<area name="門頭溝區(qū)" postcode="110109" />
<area name="房山區(qū)" postcode="110111" />
<area name="通州區(qū)" postcode="110112" />
<area name="順義區(qū)" postcode="110113" />
<area name="昌平區(qū)" postcode="110114" />
<area name="大興區(qū)" postcode="110115" />
<area name="懷柔區(qū)" postcode="110116" />
<area name="平谷區(qū)" postcode="110117" />
</city>
<city name="縣" postcode="110200" >
<area name="密云縣" postcode="110228" />
<area name="延慶縣" postcode="110229" />
</city>
</province>
<province name="天津市" postcode="120000" >
<city name="市轄區(qū)" postcode="120100" >
<area name="和平區(qū)" postcode="120101" />
<area name="河?xùn)|區(qū)" postcode="120102" />
<area name="河西區(qū)" postcode="120103" />
<area name="南開區(qū)" postcode="120104" />
<area name="河北區(qū)" postcode="120105" />
<area name="紅橋區(qū)" postcode="120106" />
<area name="塘沽區(qū)" postcode="120107" />
<area name="漢沽區(qū)" postcode="120108" />
<area name="大港區(qū)" postcode="120109" />
<area name="東麗區(qū)" postcode="120110" />
<area name="西青區(qū)" postcode="120111" />
<area name="津南區(qū)" postcode="120112" />
<area name="北辰區(qū)" postcode="120113" />
<area name="武清區(qū)" postcode="120114" />
<area name="寶坻區(qū)" postcode="120115" />
</city>
<city name="縣" postcode="120200" >
<area name="寧河縣" postcode="120221" />
<area name="靜?？h" postcode="120223" />
<area name="薊縣" postcode="120225" />
</city>
</province></p><p> <province name="河北省" postcode="130000" >
<city name="石家莊市" postcode="130100" >
<area name="長安區(qū)" postcode="130102" />
<area name="橋東區(qū)" postcode="130103" />
<area name="橋西區(qū)" postcode="130104" />
<area name="新華區(qū)" postcode="130105" />
<area name="井陘礦區(qū)" postcode="130107" />
<area name="裕華區(qū)" postcode="130108" />
<area name="井陘縣" postcode="130121" />
<area name="正定縣" postcode="130123" />
<area name="欒城縣" postcode="130124" />
<area name="行唐縣" postcode="130125" />
<area name="靈壽縣" postcode="130126" />
<area name="高邑縣" postcode="130127" />
<area name="深澤縣" postcode="130128" />
<area name="贊皇縣" postcode="130129" />
<area name="無極縣" postcode="130130" />
<area name="平山縣" postcode="130131" />
<area name="元氏縣" postcode="130132" />
<area name="趙縣" postcode="130133" />
<area name="辛集市" postcode="130181" />
<area name="藁城市" postcode="130182" />
<area name="晉州市" postcode="130183" />
<area name="新樂市" postcode="130184" />
<area name="鹿泉市" postcode="130185" />
</city>
<city name="唐山市" postcode="130200" >
<area name="路南區(qū)" postcode="130202" />
<area name="路北區(qū)" postcode="130203" />
<area name="古冶區(qū)" postcode="130204" />
<area name="開平區(qū)" postcode="130205" />
<area name="豐南區(qū)" postcode="130207" />
<area name="豐潤區(qū)" postcode="130208" />
<area name="灤縣" postcode="130223" />
<area name="灤南縣" postcode="130224" />
<area name="樂亭縣" postcode="130225" />
<area name="遷西縣" postcode="130227" />
<area name="玉田縣" postcode="130229" />
<area name="唐?？h" postcode="130230" />
<area name="遵化市" postcode="130281" />
<area name="遷安市" postcode="130283" />
</city>
<city name="秦皇島市" postcode="130300" >
<area name="海港區(qū)" postcode="130302" />
<area name="山海關(guān)區(qū)" postcode="130303" />
<area name="北戴河區(qū)" postcode="130304" />
<area name="青龍滿族自治縣" postcode="130321" />
<area name="昌黎縣" postcode="130322" />
<area name="撫寧縣" postcode="130323" />
<area name="盧龍縣" postcode="130324" />
</city>
<city name="邯鄲市" postcode="130400" >
<area name="邯山區(qū)" postcode="130402" />
<area name="叢臺區(qū)" postcode="130403" />
<area name="復(fù)興區(qū)" postcode="130404" />
<area name="峰峰礦區(qū)" postcode="130406" />
<area name="邯鄲縣" postcode="130421" />
<area name="臨漳縣" postcode="130423" />
<area name="成安縣" postcode="130424" />
<area name="大名縣" postcode="130425" />
<area name="涉縣" postcode="130426" />
<area name="磁縣" postcode="130427" />
<area name="肥鄉(xiāng)縣" postcode="130428" />
<area name="永年縣" postcode="130429" />
<area name="邱縣" postcode="130430" />
<area name="雞澤縣" postcode="130431" />
<area name="廣平縣" postcode="130432" />
<area name="館陶縣" postcode="130433" />
<area name="魏縣" postcode="130434" />
<area name="曲周縣" postcode="130435" />
<area name="武安市" postcode="130481" />
</city>
<city name="邢臺市" postcode="130500" >
<area name="橋東區(qū)" postcode="130502" />
<area name="橋西區(qū)" postcode="130503" />
<area name="邢臺縣" postcode="130521" />
<area name="臨城縣" postcode="130522" />
<area name="內(nèi)丘縣" postcode="130523" />
<area name="柏鄉(xiāng)縣" postcode="130524" />
<area name="隆堯縣" postcode="130525" />
<area name="任縣" postcode="130526" />
<area name="南和縣" postcode="130527" />
<area name="寧晉縣" postcode="130528" />
<area name="巨鹿縣" postcode="130529" />
<area name="新河縣" postcode="130530" />
<area name="廣宗縣" postcode="130531" />
<area name="平鄉(xiāng)縣" postcode="130532" />
<area name="威縣" postcode="130533" />
<area name="清河縣" postcode="130534" />
<area name="臨西縣" postcode="130535" />
<area name="南宮市" postcode="130581" />
<area name="沙河市" postcode="130582" />
</city>
<city name="保定市" postcode="130600" >
<area name="新市區(qū)" postcode="130602" />
<area name="北市區(qū)" postcode="130603" />
<area name="南市區(qū)" postcode="130604" />
<area name="滿城縣" postcode="130621" />
<area name="清苑縣" postcode="130622" />
<area name="淶水縣" postcode="130623" />
<area name="阜平縣" postcode="130624" />
<area name="徐水縣" postcode="130625" />
<area name="定興縣" postcode="130626" />
<area name="唐縣" postcode="130627" />
<area name="高陽縣" postcode="130628" />
<area name="容城縣" postcode="130629" />
<area name="淶源縣" postcode="130630" />
<area name="望都縣" postcode="130631" />
<area name="安新縣" postcode="130632" />
<area name="易縣" postcode="130633" />
<area name="曲陽縣" postcode="130634" />
<area name="蠡縣" postcode="130635" />
<area name="順平縣" postcode="130636" />
<area name="博野縣" postcode="130637" />
<area name="雄縣" postcode="130638" />
<area name="涿州市" postcode="130681" />
<area name="定州市" postcode="130682" />
<area name="安國市" postcode="130683" />
<area name="高碑店市" postcode="130684" />
</city>
<city name="張家口市" postcode="130700" >
<area name="橋東區(qū)" postcode="130702" />
<area name="橋西區(qū)" postcode="130703" />
<area name="宣化區(qū)" postcode="130705" />
<area name="下花園區(qū)" postcode="130706" />
<area name="宣化縣" postcode="130721" />
<area name="張北縣" postcode="130722" />
<area name="康?？h" postcode="130723" />
<area name="沽源縣" postcode="130724" />
<area name="尚義縣" postcode="130725" />
<area name="蔚縣" postcode="130726" />
<area name="陽原縣" postcode="130727" />
<area name="懷安縣" postcode="130728" />
<area name="萬全縣" postcode="130729" />
<area name="懷來縣" postcode="130730" />
<area name="涿鹿縣" postcode="130731" />
<area name="赤城縣" postcode="130732" />
<area name="崇禮縣" postcode="130733" />
</city>
<city name="承德市" postcode="130800" >
<area name="雙橋區(qū)" postcode="130802" />
<area name="雙灤區(qū)" postcode="130803" />
<area name="鷹手營子礦區(qū)" postcode="130804" />
<area name="承德縣" postcode="130821" />
<area name="興隆縣" postcode="130822" />
<area name="平泉縣" postcode="130823" />
<area name="灤平縣" postcode="130824" />
<area name="隆化縣" postcode="130825" />
<area name="豐寧滿族自治縣" postcode="130826" />
<area name="寬城滿族自治縣" postcode="130827" />
<area name="圍場滿族蒙古族自治縣" postcode="130828" />
</city>
<city name="滄州市" postcode="130900" >
<area name="新華區(qū)" postcode="130902" />
<area name="運(yùn)河區(qū)" postcode="130903" />
<area name="滄縣" postcode="130921" />
<area name="青縣" postcode="130922" />
<area name="東光縣" postcode="130923" />
<area name="海興縣" postcode="130924" />
<area name="鹽山縣" postcode="130925" />
<area name="肅寧縣" postcode="130926" />
<area name="南皮縣" postcode="130927" />
<area name="吳橋縣" postcode="130928" />
<area name="獻(xiàn)縣" postcode="130929" />
<area name="孟村回族自治縣" postcode="130930" />
<area name="泊頭市" postcode="130981" />
<area name="任丘市" postcode="130982" />
<area name="黃驊市" postcode="130983" />
<area name="河間市" postcode="130984" />
</city>
<city name="廊坊市" postcode="131000" >
<area name="安次區(qū)" postcode="131002" />
<area name="廣陽區(qū)" postcode="131003" />
<area name="固安縣" postcode="131022" />
<area name="永清縣" postcode="131023" />
<area name="香河縣" postcode="131024" />
<area name="大城縣" postcode="131025" />
<area name="文安縣" postcode="131026" />
<area name="大廠回族自治縣" postcode="131028" />
<area name="霸州市" postcode="131081" />
<area name="三河市" postcode="131082" />
</city>
<city name="衡水市" postcode="131100" >
<area name="桃城區(qū)" postcode="131102" />
<area name="棗強(qiáng)縣" postcode="131121" />
<area name="武邑縣" postcode="131122" />
<area name="武強(qiáng)縣" postcode="131123" />
<area name="饒陽縣" postcode="131124" />
<area name="安平縣" postcode="131125" />
<area name="故城縣" postcode="131126" />
<area name="景縣" postcode="131127" />
<area name="阜城縣" postcode="131128" />
<area name="冀州市" postcode="131181" />
<area name="深州市" postcode="131182" />
</city>
</province></p><p></root></p><p> </p><p><span style="color:#ff0000;">由于文件太長這里就寫這幾個(gè)省吧</span></p><p><span style="color:#ff0000;"> </span></p><p><span style="color:#ff0000;">city.html</span></p><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>city.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
</head>
<body>
<div>
<span><select id="sheng" style="width: 100px"><option>
請選擇省
</option></select></span>
<span><select id="shi" style="width: 100px">
<option>
請選擇相應(yīng)市
</option>
</select></span>
<span><select id="xian" style="width: 100px">
<option>
請選擇相應(yīng)區(qū)
</option>
</select></span>
</div>
</body>
</html>
<script type="text/javascript">
<!--
function getXmlDoc() {
var xmldoc;
try{
//IE瀏覽器
xmlDoc = new ActiveXObject("microsoft.XMLDOM");
}catch(e){
try{
//firefox 其他瀏覽器
xmlDoc = document.implementation.createDocument("","",null);
}catch(er){
alert("您的瀏覽器太低了");
}
}
//關(guān)閉異步加載,確保在文檔完全加載之前解析器不會繼續(xù)腳本的執(zhí)行
xmlDoc.async = false;
//轉(zhuǎn)載xml文件
xmlDoc.load("city.xml");
return xmlDoc;
}</p><p>window.onload = function() {
//通過方法獲取對象
var xmlDoc = getXmlDoc();
//獲取xml文件的根節(jié)點(diǎn)
var root = xmlDoc.documentElement;
//獲得所有的省節(jié)點(diǎn)
var provinces = root.childNodes;
//獲取頁面中要顯示的省的控件dom對象
var sheng = document.getElementById("sheng");
var shi = document.getElementById("shi");
var xian = document.getElementById("xian");
//遍歷所有的省
for(var i=0;i<provinces.length;i++) {
//查看該節(jié)點(diǎn)是否是元素節(jié)點(diǎn) 也是為了實(shí)現(xiàn)不同瀏覽器之間的兼容性問題
if(provinces[i].nodeType == 1) {
//創(chuàng)建option節(jié)點(diǎn)對象
var shengopt = document.createElement("option");
//為省節(jié)點(diǎn)添加文本節(jié)點(diǎn)
shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name")));
//為省節(jié)點(diǎn)添加屬性
shengopt.setAttribute("value",provinces[i].getAttribute("postcode"));
//添加省道頁面dom對象中
sheng.appendChild(shengopt);
}
}
//當(dāng)省節(jié)點(diǎn)發(fā)生改變時(shí) 觸發(fā)事件
sheng.onchange = function() {
//獲取省節(jié)點(diǎn)所有的option對象的集合
var shengs = sheng.options;
//獲取選中option對象的selectedIndex(下標(biāo)值)
var num = shengs.selectedIndex;
//清空市 區(qū)
shi.length = 1;
xian.length = 1;
var ppostocode = shengs[num].getAttribute("value");
//遍歷所有的省
for(var i=0;i<provinces.length;i++) {
//查看該節(jié)點(diǎn)是否是元素節(jié)點(diǎn) 也是為了實(shí)現(xiàn)不同瀏覽器之間的兼容性問題
if(provinces[i].nodeType == 1) {
var postcode = provinces[i].getAttribute("postcode");
if(postcode == ppostocode) {
var cities = provinces[i].childNodes;
shi.length = 1;
for(var i=0;i<cities.length;i++) {
if(cities[i].nodeType == 1) {
var shiopt = document.createElement("option");
shiopt.appendChild(document.createTextNode(cities[i].getAttribute("name")));
shiopt.setAttribute("value",cities[i].getAttribute("postcode"));;
shi.appendChild(shiopt);
}
}
break;
}
}
}
}
shi.onchange = function() {
var shis = shi.options;
var num = shis.selectedIndex;
var spostcode = shis[num].getAttribute("value");
for(var i=0;i<provinces.length;i++) {
if(provinces[i].nodeType == 1) {
var cities = provinces[i].childNodes;
for(var j=0;j<cities.length;j++) {
if(cities[j].nodeType == 1) {
var postcode = cities[j].getAttribute("postcode");
if(postcode == spostcode) {
xian.length = 1;
var areas = cities[j].childNodes;
for(var k=0;k<areas.length;k++) {
if(areas[k].nodeType == 1) {
var xianopt = document.createElement("option");
xianopt.appendChild(document.createTextNode(areas[k].getAttribute("name")));
xianopt.setAttribute("value",areas[k].getAttribute("postcode"));
xian.appendChild(xianopt);
}
}
break;
}
}
}
}
}
}
}</p><p>
//-->
</script>
<!--
DOM 解析中的瀏覽器差異所有現(xiàn)代瀏覽器都支持 W3C DOM 規(guī)范。不過，瀏覽器之間是有差異的。
重要的區(qū)別有兩點(diǎn)：</p><p>1、加載 XML 的方式
//IE瀏覽器
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
//firefox 其他瀏覽器
var xmlDoc = document.implementation.createDocument("","",null);
2、處理空白和換行的方式
Firefox，以及其他一些瀏覽器，會把空的空白或換行作為文本節(jié)點(diǎn)來處理，而 Internet Explorer 不會這樣。
思考: 那么怎么解決這種差異呢，下面是一種方法：
for(var i=0;i<provinces.length;i++){ //在輸出所有的子節(jié)點(diǎn)的時(shí)候
if(provinces[i].nodeType==1){//在這里判斷該節(jié)點(diǎn)是否是元素節(jié)點(diǎn)
}
}
要注意的是: xmlDoc.async = false; 寫成這樣 IE ， fireFox 都可以
xmlDoc.async = "false"; IE 可以 fireFox 會報(bào)錯(cuò)
--></p></div>
以上代碼是講解js、jq讀取xml文件的方法，希望大家喜歡。
您可能感興趣的文章:
- javascript 讀取XML數(shù)據(jù)，在頁面中展現(xiàn)、編輯、保存的實(shí)現(xiàn)
- JavaScript 解析讀取XML文檔 實(shí)例代碼
- JS讀取XML文件示例代碼
- javascript 讀取xml,寫入xml 實(shí)現(xiàn)代碼
- javascript讀取xml
- JS通過ajax動態(tài)讀取xml文件內(nèi)容的方法
- JS解析XML的實(shí)現(xiàn)代碼
- JS解析XML文件和XML字符串詳解
- JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)
- JS實(shí)現(xiàn)讀取xml內(nèi)容并輸出到div中的方法示例
相關(guān)文章
JS中的for in 可遍歷變量的所有屬性！利用此特性制作了一個(gè)JS當(dāng)前屬性查詢！2010-12-12
Bootstrap基本樣式學(xué)習(xí)筆記之按鈕(4)
篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之按鈕基本樣式的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法
這篇文章主要介紹了JS實(shí)現(xiàn)文字鏈接感應(yīng)鼠標(biāo)淡入淡出改變顏色的方法,實(shí)例分析了javascript操作鼠標(biāo)事件及css樣式的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
Bootstrap 模態(tài)對話框只加載一次 remote 數(shù)據(jù)的完美解決辦法
前端框架 Bootstrap 的模態(tài)對話框，可以使用 remote 選項(xiàng)指定一個(gè) URL，這樣對話框在第一次彈出的時(shí)候就會自動從這個(gè)地址加載數(shù)據(jù)到 .modal-body 中，但是它只會加載一次，不過通過在事件中調(diào)用 removeData() 方法可以解決這個(gè)問題，具體操作方法，大家通過本文了解下吧2017-07-07
解決js中的setInterval清空定時(shí)器不管用問題
這篇文章主要介紹了解決js中的setInterval清空定時(shí)器不管用問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
前端JavaScript實(shí)現(xiàn)本地模糊搜索功能的方法實(shí)例
對于模糊查詢,一般都是傳關(guān)鍵字給后端,由后端來做。但是有時(shí)候一些輕量級的列表前端來做可以減少ajax請求,在一定程度上提高用戶體驗(yàn),這篇文章主要給大家介紹了關(guān)于前端JavaScript如何實(shí)現(xiàn)本地模糊搜索功能的相關(guān)資料,需要的朋友可以參考下2021-07-07
本文介紹了如何使用pdfmake第三方庫在項(xiàng)目中根據(jù)模板生成PDF文件,文中還提到了常用的配置,如頁眉和頁腳效果,對pdfmake pdf使用方法感興趣的朋友一起看看吧2024-09-09
console 是 JavaScript 提供的一個(gè)全局對象,常用于調(diào)試和日志記錄,它包含一組方法,用于在控制臺中打印消息、顯示數(shù)據(jù)以及調(diào)試程序,本文介紹js 中的console使用示例,感興趣的朋友一起看看吧2024-12-12
這篇文章主要介紹了js下拉菜單生成器dropMenu的使用方法 ，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-08-08
今天小編就為大家分享一篇解決Lyaui 表格自適應(yīng)高度的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11