简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > JS Tutorial > body text

How to read xml files with JS and jQ_javascript skills

WBOY
Release： 2016-05-16 15:27:13
Original
1218 people have browsed it

Without further ado, I will just post the code for you. The specific code is as follows:

jquery reads xml file 

<!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>
Copy after login

js reads xml file

<div id="blog_content" class="blog_content"><p><span style="color:#ff0000;">city.xml 文件</span></p><p><&#63;xml version="1.0" encoding="UTF-8"&#63;>
<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>
Copy after login

The above code explains how js and jq read xml files. I hope you like it.

Related labels：
js读取xml文件 js读取xml jq读取xml
source：php.cn
Previous article：Detailed explanation of the core technology of constructing flow charts in js JsPlumb (2)_javascript skills Next article：Detailed explanation of the core technology of constructing flow charts in js JsPlumb_javascript skills
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
What are the best practices for displaying version information in web applications? I'm developing a web application. What are the best practices for displaying version infor...
From 2024-04-06 19:13:16
0
2
476
PHP AJAX not updating dynamically even though consolelog has correct value I'm trying to update $_POST['category'] by clicking a button. I'm trying to use AJAX (for ...
From 2024-04-02 17:50:59
0
1
396
"Attempting to read while the reader is closed has no effect." I'm trying to write data from mysqluinlgc# to a .txt file but I'm getting the error "...
From 2024-03-31 14:58:58
0
1
273
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！