废话不多说了，直接给大家贴代码了，具体代码如下所示：
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="https://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> <h>jQuery读取XML文件</h> <a href="#">点击读取XML</a> </div> </body> </html>
js读取xml文件
<div><p><span>city.xml 文件</span></p><p><?xml version="1.0" encoding="UTF-8"?> <root> <province postcode="100000" > <city postcode="100100" > <area postcode="100101" /> </city> </province> <province postcode="110000" > <city postcode="110100" > <area postcode="110101" /> <area postcode="110102" /> <area postcode="110103" /> <area postcode="110104" /> <area postcode="110105" /> <area postcode="110106" /> <area postcode="110107" /> <area postcode="110108" /> <area postcode="110109" /> <area postcode="110111" /> <area postcode="110112" /> <area postcode="110113" /> <area postcode="110114" /> <area postcode="110115" /> <area postcode="110116" /> <area postcode="110117" /> </city> <city postcode="110200" > <area postcode="110228" /> <area postcode="110229" /> </city> </province> <province postcode="120000" > <city postcode="120100" > <area postcode="120101" /> <area postcode="120102" /> <area postcode="120103" /> <area postcode="120104" /> <area postcode="120105" /> <area postcode="120106" /> <area postcode="120107" /> <area postcode="120108" /> <area postcode="120109" /> <area postcode="120110" /> <area postcode="120111" /> <area postcode="120112" /> <area postcode="120113" /> <area postcode="120114" /> <area postcode="120115" /> </city> <city postcode="120200" > <area postcode="120221" /> <area postcode="120223" /> <area postcode="120225" /> </city> </province></p><p> <province postcode="130000" > <city postcode="130100" > <area postcode="130102" /> <area postcode="130103" /> <area postcode="130104" /> <area postcode="130105" /> <area postcode="130107" /> <area postcode="130108" /> <area postcode="130121" /> <area postcode="130123" /> <area postcode="130124" /> <area postcode="130125" /> <area postcode="130126" /> <area postcode="130127" /> <area postcode="130128" /> <area postcode="130129" /> <area postcode="130130" /> <area postcode="130131" /> <area postcode="130132" /> <area postcode="130133" /> <area postcode="130181" /> <area postcode="130182" /> <area postcode="130183" /> <area postcode="130184" /> <area postcode="130185" /> </city> <city postcode="130200" > <area postcode="130202" /> <area postcode="130203" /> <area postcode="130204" /> <area postcode="130205" /> <area postcode="130207" /> <area postcode="130208" /> <area postcode="130223" /> <area postcode="130224" /> <area postcode="130225" /> <area postcode="130227" /> <area postcode="130229" /> <area postcode="130230" /> <area postcode="130281" /> <area postcode="130283" /> </city> <city postcode="130300" > <area postcode="130302" /> <area postcode="130303" /> <area postcode="130304" /> <area postcode="130321" /> <area postcode="130322" /> <area postcode="130323" /> <area postcode="130324" /> </city> <city postcode="130400" > <area postcode="130402" /> <area postcode="130403" /> <area postcode="130404" /> <area postcode="130406" /> <area postcode="130421" /> <area postcode="130423" /> <area postcode="130424" /> <area postcode="130425" /> <area postcode="130426" /> <area postcode="130427" /> <area postcode="130428" /> <area postcode="130429" /> <area postcode="130430" /> <area postcode="130431" /> <area postcode="130432" /> <area postcode="130433" /> <area postcode="130434" /> <area postcode="130435" /> <area postcode="130481" /> </city> <city postcode="130500" > <area postcode="130502" /> <area postcode="130503" /> <area postcode="130521" /> <area postcode="130522" /> <area postcode="130523" /> <area postcode="130524" /> <area postcode="130525" /> <area postcode="130526" /> <area postcode="130527" /> <area postcode="130528" /> <area postcode="130529" /> <area postcode="130530" /> <area postcode="130531" /> <area postcode="130532" /> <area postcode="130533" /> <area postcode="130534" /> <area postcode="130535" /> <area postcode="130581" /> <area postcode="130582" /> </city> <city postcode="130600" > <area postcode="130602" /> <area postcode="130603" /> <area postcode="130604" /> <area postcode="130621" /> <area postcode="130622" /> <area postcode="130623" /> <area postcode="130624" /> <area postcode="130625" /> <area postcode="130626" /> <area postcode="130627" /> <area postcode="130628" /> <area postcode="130629" /> <area postcode="130630" /> <area postcode="130631" /> <area postcode="130632" /> <area postcode="130633" /> <area postcode="130634" /> <area postcode="130635" /> <area postcode="130636" /> <area postcode="130637" /> <area postcode="130638" /> <area postcode="130681" /> <area postcode="130682" /> <area postcode="130683" /> <area postcode="130684" /> </city> <city postcode="130700" > <area postcode="130702" /> <area postcode="130703" /> <area postcode="130705" /> <area postcode="130706" /> <area postcode="130721" /> <area postcode="130722" /> <area postcode="130723" /> <area postcode="130724" /> <area postcode="130725" /> <area postcode="130726" /> <area postcode="130727" /> <area postcode="130728" /> <area postcode="130729" /> <area postcode="130730" /> <area postcode="130731" /> <area postcode="130732" /> <area postcode="130733" /> </city> <city postcode="130800" > <area postcode="130802" /> <area postcode="130803" /> <area postcode="130804" /> <area postcode="130821" /> <area postcode="130822" /> <area postcode="130823" /> <area postcode="130824" /> <area postcode="130825" /> <area postcode="130826" /> <area postcode="130827" /> <area postcode="130828" /> </city> <city postcode="130900" > <area postcode="130902" /> <area postcode="130903" /> <area postcode="130921" /> <area postcode="130922" /> <area postcode="130923" /> <area postcode="130924" /> <area postcode="130925" /> <area postcode="130926" /> <area postcode="130927" /> <area postcode="130928" /> <area postcode="130929" /> <area postcode="130930" /> <area postcode="130981" /> <area postcode="130982" /> <area postcode="130983" /> <area postcode="130984" /> </city> <city postcode="131000" > <area postcode="131002" /> <area postcode="131003" /> <area postcode="131022" /> <area postcode="131023" /> <area postcode="131024" /> <area postcode="131025" /> <area postcode="131026" /> <area postcode="131028" /> <area postcode="131081" /> <area postcode="131082" /> </city> <city postcode="131100" > <area postcode="131102" /> <area postcode="131121" /> <area postcode="131122" /> <area postcode="131123" /> <area postcode="131124" /> <area postcode="131125" /> <area postcode="131126" /> <area postcode="131127" /> <area postcode="131128" /> <area postcode="131181" /> <area postcode="131182" /> </city> </province></p><p></root></p><p> </p><p><span>由于文件太长这里就写这几个省吧</span></p><p><span> </span></p><p><span>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 type="text/css" href="https://www.jb51.net/article/styles.css">--> </head> <body> <div> <span><select><option> 请选择省 </option></select></span> <span><select> <option> 请选择相应市 </option> </select></span> <span><select> <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文件的方法，希望大家喜欢。
您可能感兴趣的文章: