JS与jQ读取xml文件的方法
废话不多说了，直接给大家贴代码了，具体代码如下所示：
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=\"静海县\" 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=\"唐海县\" 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=\"康保县\" 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文件的方法，希望大家喜欢。
本文地址：https://www.stayed.cn/item/19515
转载请注明出处。
本站部分内容来源于网络,如侵犯到您的权益,请 联系我
我的博客
人生若只如初见，何事秋风悲画扇。
我的标签
随笔档案
- 2024-02(2)
- 2023-06(1)
- 2023-05(1)
- 2023-04(14)
- 2023-03(3)
- 2023-01(6)
- 2022-12(5)
- 2022-11(5)
- 2022-07(2)
- 2022-06(4)
- 2022-05(3)
- 2022-03(1)
- 2021-12(6)
- 2021-11(1)
- 2021-10(3)
- 2021-09(5)
- 2021-07(5)
- 2021-02(2)
- 2021-01(7)
- 2020-12(18)
- 2020-11(14)
- 2020-10(12)
- 2020-09(10)
- 2020-08(22)
- 2020-07(2)
- 2020-06(1)
- 2020-04(5)
- 2020-03(9)
- 2020-02(7)
- 2020-01(9)
- 2019-12(8)
- 2019-11(10)
- 2019-10(11)
- 2019-09(17)
- 2019-08(16)
- 2019-07(6)
- 2019-06(3)
- 2019-04(1)
- 2019-03(8)
- 2019-02(5)
- 2019-01(1)
- 2018-11(2)
- 2018-10(3)
- 2018-09(1)
- 2018-08(3)
- 2018-07(3)
- 2018-06(7)
- 2018-04(4)
- 2018-03(5)
- 2018-02(4)
- 2018-01(22)
- 2017-12(3)
- 2017-11(5)
- 2017-10(15)
- 2017-09(26)
- 2017-08(1)
- 2017-07(3)