解析xml文件，然后将城市列表还原到下拉列表框中；当选择下拉列表框时，在对应的文本框中显示该城市信息。

前端代码：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>jQuery ajax解析xml文件demo</title>

<script type="text/javascript" src="jquery.min.js"></script>

</head>

<body>

<input type="button" value="加载xml文件" onClick="cityajax();this.disabled = true;"><br>

城市列表:

<select id="list">

</select>

<br>

城市信息：

<textarea id="texts"></textarea>

<script>

function cityajax(){

    var olist=$("#list");

    var otext=$("#texts");

    var arr=new Array();

    $.ajax({

        url:"/city_xml/XML/city.xml",

        type:"POST",

        dataType:'xml',

        success:function(xml){

            $(xml).find("City").each(function(i) {

                //获取城市名字

                var cityName=$(this).attr("Name");

                //添加到下拉框,设置内容

                $("<option></option>").appendTo(olist).text(cityName);

                //获取城市信息，并存入数组中

                var cityText=$(this).find("Description").text();

                arr[i]=cityText;

                changetext();

            });

        },

        error:function(){ alert("加载失败"); }

    })

    //选择不同城市对应信息发生改变

    function changetext(){

        var _index=olist.find("option:selected").index();

        otext.text(arr[_index]);

    }

    olist.change(changetext)

}

</script>

</body>

</html>

xml文件：

<?xml version="1.0" encoding="gb2312"?>

<CityList>

    <City Name="北京">

        <Description>京有着三千余年的建城史和八百五十余年的建都史...</Description>

    </City>

    <City Name="上海">

        <Description>上海，中国大陆第一大城市；四个中央直辖市之一</Description>

    </City>

    <City Name="广州">

        <Description>广州，简称穗，别称羊城、穗城、穗垣、仙城、花城；解放前旧称省城。</Description>

    </City>

    <City Name="成都">

        <Description>位于四川省中部，是中西部地区重要的中心城市。西南地区科技中心、商贸中心、金融中心和交通通信枢纽。</Description>

    </City>

    <City Name="沈阳">

        <Description>沈阳，辽宁省省会，中国15个副省级城市之一，中国七大区域中心城市之一</Description>

    </City>

</CityList>

代码在ie8及以下版本xml加载失败。哪位朋友有好的意见欢迎提出。

jQuery ajax解析xml文件demo的更多相关文章

  1. SAXReader解析xml文件demo

    1. 加入jar包 2. 代码解析 package practice; import java.io.File; import java.util.List; import org.dom4j.Doc ...

  2. 2017/4/26-DOM解析XML文件

    DOM解析XML 1.分析 DOM是JAVA自带的XML解析API.DOM首先将XML文件全部加载至内存中,然后再内存中创建DOM树,生成DOM树上的每个Node节点. 2.优点 1) 可以创建或修改 ...

  3. JQuery -- Jquery 中的Ajax, Jquery解析xml文件

    1. JQuery 对 Ajax 操作进行了封装,在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(),第三层是$.getScript ...

  4. Ajax实现xml文件数据插入数据库（一）--- 构建解析xml文件的js库

    Ajax实现将xml文件数据插入数据库的过程所涉及到的内容比较多,所以对于该过程的讲解本人打算根据交互的过程将其分为三个部分,第一部分为构建解析xml文件的javascript库,第二部分为ajax与 ...

  5. Ajax--PHP+JQuery+Ajax解析json、XML数据、加载页面

    一.JQuery+Ajax用get.post方式提交和请求数据 知识要点: $('#userName').blur(function () { var txt = $(this).val(); $.a ...

  6. java中采用dom4j解析xml文件

    一.前言 在最近的开发中用到了dom4j来解析xml文件,以前听说过来解析xml文件的几种标准方式:但是从来的没有应用过来,所以可以在google中搜索dmo4j解析xml文件的方式,学习一下dom4 ...

  7. java解析XML文件

    dom4j是一个Java的XML API,类似于jdom,用来读写XML文件的.dom4j是一个非常非常优秀的Java XML API,具有性能优异.功能强大和极端易用使用的特点,同时它也是一个开放源 ...

  8. 使用dom4j创建和解析xml文件

    使用dom4j创建和解析xml文件 在项目开发中,我们经常会遇到xml文件的创建和解析从别人接口得到的xml文件,而我们最常使用的组件是dom4j. 下面我就以代码来讲解一下如何使用dom4j来创建x ...

  9. ACEXML解析XML文件——我是如何学习并在短时间内掌握一个库的使用方法的

    最近做的C++项目中需要使用xml文件保存一些信息,程序启动时会读取这些信息.最终经过主程的评测,决定使用ACEXML库来读取解析XML文件. 好吧,至于为什么选择ACEXML库,我就不说了.既然选择 ...

随机推荐

  1. WPF自定义控件（二）の重写原生控件样式模板

    话外篇: 要写一个圆形控件,用Clip,重写模板,去除样式引用圆形图片可以有这三种方式. 开发过程中,我们有时候用WPF原生的控件就能实现自己的需求,但是样式.风格并不能满足我们的需求,那么我们该怎么 ...

  2. console命令的其他强大用法

    阅读目录 谷歌控制台Elements面板查看元素上绑定的事情样式操作总况console.logconsole.infoconsole.errorconsole.warnconsole.debugcon ...

  3. [1] 从零开始 TensorFlow 学习

    计算图的基本概念 TensorFlow 的名字中己经说明了它最重要的两个概念一一Tensor 和 Flow Tensor: 张量(高阶数组,矩阵为二阶张量,向量为一阶张量,标量为零阶张量) Flow: ...

  4. extjs 中的一些鲜为人知的属性（深渊巨坑）

    1. new Ext.form.FormPanel  组件中,去除边框属性为:baseCls:'my-panel-no-border', 2.当 new Ext.form.FormPanel  嵌套b ...

  5. 记一次layui弹框关闭问题

    我在博客园记录过layui关于弹框关闭问题,文章为layui关闭弹出层,这次出现了特殊情况,之前是通过layer.closeAll()解决了这个问题,但是这次解决不了.而换成parent.layer. ...

  6. hdu - 2586 (LCA板子题)

    传送门 (这次的英文题面要比上一个容易看多了) (英语蒟蒻的卑微) 又是一个很裸的LCA题 (显然,这次不太容易打暴力咧) (但听说还是有大佬用dfs直接a掉了) 正好 趁这个机会复习一下LCA 这里 ...

  7. 简述DDOS攻击的工作原理

    1.DDOS攻击:大量的肉鸡对服务器的不同端口发送巨型流量的UDP报文,无法通关关闭端口的方式来进行隔离,破坏力极强,严重会造成服务器当机. SYN/ACK Flood攻击:经典最有效的DDOS方法. ...

  8. Java网络编程中异步编程的理解

    目录 前言 一.异步,同步,阻塞和非阻塞的理解 二.异步编程从用户层面和框架层面不同角度的理解 用户角度的理解 框架角度的理解 三.为什么使用异步 四.理解这些能在实际中的应用 六.困惑 参考文章 前 ...

  9. JS中AOP的实现和运用

    在编写js的时候,我们有时会遇到针对某种场景做处理,比如在方法开始的时候校验参数,执行方法前检查权限,或是删除前给出确认提示等等.这些校验方法.权限检测.确认提示,规则可能都是相同的,在每个方法前去调 ...

  10. 朱晔和你聊Spring系列S1E4：灵活但不算好用的Spring MVC

    阅读PDF版本 本文会以一些例子来展现Spring MVC的常见功能和一些扩展点,然后我们来讨论一下Spring MVC好用不好用. 使用SpringBoot快速开始 基于之前的parent模块,我们 ...