廢話不多說了，直接給大家貼代碼了，具體代碼如下所示：
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學習</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", //返回數據格式為xml dataType: "xml", //請求成功完成后要執行的方法 success: function (xml) { $(xml).find("url").each(function (i) { //i從開始，累加，如果要顯示所有數據，將判斷去除即可 if (i < ) { //鏈接地址 var location = $(this).find("loc").text(); //顯示文字 var text = $(this).find("loc").text(); //動態加載方法:鏈接地址 $("<a>").attr("href", location) //顯示文字 .text(text) //設置樣式 .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;">點擊讀取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="請選擇區" postcode="100101" /> </city> </province> <province name="北京市" postcode="110000" > <city name="市轄區" postcode="110100" > <area name="東城區" postcode="110101" /> <area name="西城區" postcode="110102" /> <area name="崇文區" postcode="110103" /> <area name="宣武區" postcode="110104" /> <area name="朝陽區" postcode="110105" /> <area name="豐臺區" postcode="110106" /> <area name="石景山區" postcode="110107" /> <area name="海淀區" postcode="110108" /> <area name="門頭溝區" postcode="110109" /> <area name="房山區" postcode="110111" /> <area name="通州區" postcode="110112" /> <area name="順義區" postcode="110113" /> <area name="昌平區" postcode="110114" /> <area name="大興區" postcode="110115" /> <area name="懷柔區" postcode="110116" /> <area name="平谷區" postcode="110117" /> </city> <city name="縣" postcode="110200" > <area name="密云縣" postcode="110228" /> <area name="延慶縣" postcode="110229" /> </city> </province> <province name="天津市" postcode="120000" > <city name="市轄區" postcode="120100" > <area name="和平區" postcode="120101" /> <area name="河東區" postcode="120102" /> <area name="河西區" postcode="120103" /> <area name="南開區" postcode="120104" /> <area name="河北區" postcode="120105" /> <area name="紅橋區" postcode="120106" /> <area name="塘沽區" postcode="120107" /> <area name="漢沽區" postcode="120108" /> <area name="大港區" postcode="120109" /> <area name="東麗區" postcode="120110" /> <area name="西青區" postcode="120111" /> <area name="津南區" postcode="120112" /> <area name="北辰區" postcode="120113" /> <area name="武清區" postcode="120114" /> <area name="寶坻區" 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="長安區" postcode="130102" /> <area name="橋東區" postcode="130103" /> <area name="橋西區" postcode="130104" /> <area name="新華區" postcode="130105" /> <area name="井陘礦區" postcode="130107" /> <area name="裕華區" 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="路南區" postcode="130202" /> <area name="路北區" postcode="130203" /> <area name="古冶區" postcode="130204" /> <area name="開平區" postcode="130205" /> <area name="豐南區" postcode="130207" /> <area name="豐潤區" 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="海港區" postcode="130302" /> <area name="山海關區" postcode="130303" /> <area name="北戴河區" 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="邯山區" postcode="130402" /> <area name="叢臺區" postcode="130403" /> <area name="復興區" postcode="130404" /> <area name="峰峰礦區" 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="肥鄉縣" 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="橋東區" postcode="130502" /> <area name="橋西區" postcode="130503" /> <area name="邢臺縣" postcode="130521" /> <area name="臨城縣" postcode="130522" /> <area name="內丘縣" postcode="130523" /> <area name="柏鄉縣" 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="平鄉縣" 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="新市區" postcode="130602" /> <area name="北市區" postcode="130603" /> <area name="南市區" 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="橋東區" postcode="130702" /> <area name="橋西區" postcode="130703" /> <area name="宣化區" postcode="130705" /> <area name="下花園區" 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="雙橋區" postcode="130802" /> <area name="雙灤區" postcode="130803" /> <area name="鷹手營子礦區" 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="新華區" postcode="130902" /> <area name="運河區" 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="獻縣" 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="安次區" postcode="131002" /> <area name="廣陽區" 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="桃城區" postcode="131102" /> <area name="棗強縣" postcode="131121" /> <area name="武邑縣" postcode="131122" /> <area name="武強縣" 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;">由于文件太長這里就寫這幾個省吧</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> 請選擇相應市 </option> </select></span> <span><select id="xian" style="width: 100px"> <option> 請選擇相應區 </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("您的瀏覽器太低了"); } } //關閉異步加載,確保在文檔完全加載之前解析器不會繼續腳本的執行 xmlDoc.async = false; //轉載xml文件 xmlDoc.load("city.xml"); return xmlDoc;}</p><p>window.onload = function() { //通過方法獲取對象 var xmlDoc = getXmlDoc(); //獲取xml文件的根節點 var root = xmlDoc.documentElement; //獲得所有的省節點 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++) { //查看該節點是否是元素節點 也是為了實現不同瀏覽器之間的兼容性問題 if(provinces[i].nodeType == 1) { //創建option節點對象 var shengopt = document.createElement("option"); //為省節點添加文本節點 shengopt.appendChild(document.createTextNode(provinces[i].getAttribute("name"))); //為省節點添加屬性 shengopt.setAttribute("value",provinces[i].getAttribute("postcode")); //添加省道頁面dom對象中 sheng.appendChild(shengopt); } } //當省節點發生改變時 觸發事件 sheng.onchange = function() { //獲取省節點所有的option對象的集合 var shengs = sheng.options; //獲取選中option對象的selectedIndex(下標值) var num = shengs.selectedIndex; //清空市 區 shi.length = 1; xian.length = 1; var ppostocode = shengs[num].getAttribute("value"); //遍歷所有的省 for(var i=0;i<provinces.length;i++) { //查看該節點是否是元素節點 也是為了實現不同瀏覽器之間的兼容性問題 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 解析中的瀏覽器差異所有現代瀏覽器都支持 W3C DOM 規范。不過，瀏覽器之間是有差異的。重要的區別有兩點：</p><p>1、加載 XML 的方式 //IE瀏覽器 var xmlDoc = new ActiveXObject("Microsoft.XMLDOM"); //firefox 其他瀏覽器 var xmlDoc = document.implementation.createDocument("","",null);2、處理空白和換行的方式 Firefox，以及其他一些瀏覽器，會把空的空白或換行作為文本節點來處理，而 Internet Explorer 不會這樣。 思考: 那么怎么解決這種差異呢，下面是一種方法： for(var i=0;i<provinces.length;i++){ //在輸出所有的子節點的時候 if(provinces[i].nodeType==1){//在這里判斷該節點是否是元素節點 } } 要注意的是: xmlDoc.async = false; 寫成這樣 IE ， fireFox 都可以 xmlDoc.async = "false"; IE 可以 fireFox 會報錯 --></p></div> 以上代碼是講解js、jq讀取xml文件的方法，希望大家喜歡。
新聞熱點
疑難解答
