解析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. js判断是否是移动端自动跳转到wap页面代码

    <script type="text/javascript"> function is_mobile(){ var regex_match=/(nokia|iphone ...

  2. 设计模式のBuilderPattern(创建者模式)----创建模式

    一.产生背景 要组装一台电脑,它的组装过程基本是不变的,都可以由主板.CPU.内存等按照某个稳定方式组合而成.然而主板.CPU.内存等零件本身都是可能多变的.将内存等这种易变的零件与电脑的其他部件分离 ...

  3. Python requests模块解析XML

    检查QQ是否在线(api感觉不准) import requests from xml.etree import ElementTree qq_str = input('please input the ...

  4. Apache Shiro对象概念

    #,Authentication,认证,也就是验证用户的身份,就是确定你是不是你,比如通过用户名.密码的方式验证,或者某些第三方认证,比如微信认证. #,Authorization,授权,也叫访问控制 ...

  5. 爬取伯乐在线文章(二)通过xpath提取源文件中需要的内容

    爬取说明 以单个页面为例,如:http://blog.jobbole.com/110287/ 我们可以提取标题.日期.多少个评论.正文内容等 Xpath介绍 1. xpath简介 (1) xpath使 ...

  6. 解决 Vim 的 quickfix 插件错误信息乱码问题

      将以下代码插入 vim 配置文件即可,       function! QfMakeConv()        let qflist = getqflist()        for i in q ...

  7. jenkins发送生成的html报告作为邮件附件,但无内容的问题分析

  8. python3 列表/字典/集合推导式

    '''列表推导式[结果 fox循环 if语句]'''lst = ["Python周末%s期" % i for i in range(1, 27) if i%2 == 0]print ...

  9. bsxfun, arrayfun, cellfun, spfun, structfun

    在使用matlab进行矩阵计算的时候,经常会遇到要使用for循环的情况.但其实很多操作可以用内部的一些函数代替.今天总结一些几个函数的用法: bsxfun, arrayfun, cellfun, sp ...

  10. AT1219 歴史の研究

    附带权值的类区间众数问题?不是很好策啊 发现题目没有强制在线,而且也只有询问操作,那么可以考虑莫队 但是这里的莫队有一个很显著的特征,插入的时候很好维护答案,但是删除的时候不好回退 那么有没有什么办法 ...