jQuery 解析xml文件


Posted in Javascript onAugust 09, 2009
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
<title>jquery xml解析</title> 
<script src="jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
$.ajax({url:"City.xml", 
success:function(xml){ 
$(xml).find("province").each(function(){ 
var t = $(this).attr("name");//this-> 
$("#DropProvince").append("<option>"+t+"</option>"); 
}); 
} 
}); 
$("#DropProvince").change(function(){ 
$("#sCity>option").remove(); 
var pname = $("#DropProvince").val(); 
$.ajax({url:"City.xml", 
success:function(xml){ 
$(xml).find("province[name='"+pname+"']>city").each(function(){ 
$("#sCity").append("<option>"+$(this).text()+"</option>"); 
}); 
} 
}); 
}); 
}); 
</script> 
</head> 
<body> 
<form id="form1"> 
<div> 
<select id="DropProvince" style="width:60px;"> 
<option>请选择</option> 
</select> 
<select id="sCity" style="width:60px;"> 
</select> 
</div> 
</form> 
</body> 
</html>

city.xml文件
<?xml version="1.0" encoding="utf-8" ?> 
<provinces> 
<province name="湖北"> 
<city>武汉</city> 
<city>黄石</city> 
<city>宜昌</city> 
<city>天门</city> 
</province> 
<province name="湖南"> 
<city>邵阳</city> 
<city>长沙</city> 
<city>岳阳</city> 
</province> 
<province name="广东"> 
<city>广州</city> 
<city>深圳</city> 
</province> 
</provinces>

其实主要是注意怎样在html界面上解析xml文件,格式就是
<script type="text/javascript"> 
$(document).ready(function () { 
$.ajax({ 
url: "City.xml", 
success: function (xml) { 
$(xml).find("province").each(function () { 
var t = $(this).attr("name"); 
$("#DropProvince").append("<option>" + t + "</option>"); 
}); 
} 
}); 
$("#DropProvince").change(function () { 
$("#sCity>option").remove(); 
var pname = $("#DropProvince").val(); 
$.ajax({ 
url: "City.xml", 
success: function (xml) { 
$(xml).find("province[name='"+pname+"']>city").each(function(){ 
$("#sCity").append("<option>"+$(this).text()+"</option>"); 
}); 
} 
}); 
}); 
}); 
</script>

就是用$.ajax()调用xml文件的内容。然后$.each()进行循环操作,基本思想就是这样的,成功之后去执行success这个回调函数。这里的xml文件是用来存储数据的,相当于在数据库中读取文件。
Javascript 相关文章推荐
document.documentElement和document.body区别介绍
Sep 16 Javascript
基于JQuery的列表拖动排序实现代码
Oct 01 Javascript
JavaScript实现九九乘法表的简单实例
Jun 07 Javascript
超实用的javascript时间处理总结
Aug 16 Javascript
Bootstrap中点击按钮后变灰并显示加载中实例代码
Sep 23 Javascript
网页中右键功能的实现方法之contextMenu的使用
Feb 20 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
JavaScript实现shuffle数组洗牌操作示例
Jan 03 Javascript
基于layui框架响应式布局的一些使用详解
Sep 16 Javascript
详解小程序BackgroundAudioManager踩坑之旅
Dec 08 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
抖音短视频(douyin)去水印工具的实现代码
Mar 30 Javascript
ext 代码生成器
Aug 07 #Javascript
JavaScript 的方法重载效果
Aug 07 #Javascript
JQuery 小练习(实例代码)
Aug 07 #Javascript
js正确获取元素样式详解
Aug 07 #Javascript
JavaScript 乱码问题
Aug 06 #Javascript
jquery ui dialog里调用datepicker的问题
Aug 06 #Javascript
jquery select(列表)的操作(取值/赋值)
Aug 06 #Javascript
You might like
PHP正确解析UTF-8字符串技巧应用
2012/11/07 PHP
解析htaccess伪静态的规则
2013/06/18 PHP
PHP SPL标准库之文件操作(SplFileInfo和SplFileObject)实例
2015/05/11 PHP
PHP下使用mysqli的函数连接mysql出现warning: mysqli::real_connect(): (hy000/1040): ...
2016/02/14 PHP
PDO::inTransaction讲解
2019/01/28 PHP
php连接sftp的作用以及实例代码
2019/09/23 PHP
javascript 客户端验证上传图片的大小(兼容IE和火狐)
2009/08/15 Javascript
读jQuery之八 包装事件对象
2011/06/21 Javascript
JQquery的一些使用心得分享
2012/08/01 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
删除javascript所创建子节点的方法
2015/05/21 Javascript
jQuery隐藏和显示效果实现
2016/04/06 Javascript
微信小程序  modal详解及实例代码
2016/11/09 Javascript
微信小程序wx.uploadfile 本地文件转base64的实现代码
2018/06/28 Javascript
微信小程序实现图片上传放大预览删除代码
2020/06/28 Javascript
Vue 重置组件到初始状态的方法示例
2018/10/10 Javascript
JS实现放大镜效果
2020/09/21 Javascript
Python中logging模块的用法实例
2014/09/29 Python
Python bsddb模块操作Berkeley DB数据库介绍
2015/04/08 Python
详解Python当中的字符串和编码
2015/04/25 Python
python爬虫入门教程--HTML文本的解析库BeautifulSoup(四)
2017/05/25 Python
python 识别图片中的文字信息方法
2018/05/10 Python
python使用requests模块实现爬取电影天堂最新电影信息
2019/04/03 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
Python操作列表常用方法实例小结【创建、遍历、统计、切片等】
2019/10/25 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
Python3+Django get/post请求实现教程详解
2021/02/16 Python
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
如何利用input事件来监听移动端的输入
2016/04/15 HTML / CSS
超30万乐谱下载:Musicnotes.com
2016/09/24 全球购物
英国手机零售商:Carphone Warehouse
2018/06/06 全球购物
解释一下抽象方法和抽象类
2016/08/27 面试题
机械设计及其自动化专业推荐信
2013/10/31 职场文书
医务人员竞聘职务自我评价分享
2013/11/08 职场文书
企业管理部经理岗位职责
2013/12/24 职场文书
2015年中秋放假通知范文
2015/08/18 职场文书