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 相关文章推荐
jquery 回车事件实现代码
Aug 23 Javascript
一个通过script自定义属性传递配置参数的方法
Sep 15 Javascript
JavaScript中的Web worker多线程API研究
Dec 06 Javascript
JS仿iGoogle自定义首页模块拖拽特效的方法
Feb 13 Javascript
JS往数组中添加项性能分析
Feb 25 Javascript
前端面试题及答案整理(二)
Aug 26 Javascript
Jquery循环截取字符串的方法(多出的字符串处理成&quot;...&quot;)
Nov 28 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
JS实现简单表格排序操作示例
Oct 07 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
Sep 13 Javascript
微信小程序按钮点击动画效果的实现
Sep 04 Javascript
vue实现顶部菜单栏
Nov 08 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
DC动画很好看?新作烂得令人发指,名叫《红色之子》
2020/04/09 欧美动漫
一个基于phpQuery的php通用采集类分享
2014/04/09 PHP
PHP获取网站中各文章的第一张图片的代码示例
2016/05/20 PHP
PHP实现的多维数组排序算法分析
2018/02/10 PHP
TP5.0框架实现无限极回复功能的方法分析
2019/05/04 PHP
laravel 获取某个查询的查询SQL语句方法
2019/10/12 PHP
extjs3 combobox取value和text案例详解
2013/02/06 Javascript
javascript控制Div层透明属性由浅变深由深变浅逐渐显示
2013/11/12 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
JS实现距离上次刷新已过多少秒示例
2014/05/23 Javascript
js实现仿Windows风格选项卡和按钮效果实例
2015/05/13 Javascript
JS实现淡蓝色简洁竖向Tab点击切换效果
2015/10/06 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
jQuery实现的鼠标响应缓冲动画效果示例
2018/02/13 jQuery
angular1.x ui-route传参的三种写法小结
2018/08/31 Javascript
移动端 Vue+Vant 的Uploader 实现上传、压缩、旋转图片功能
2019/06/10 Javascript
JavaScript闭包相关知识解析
2019/10/19 Javascript
vue如何在项目中调用腾讯云的滑动验证码
2020/07/15 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
jQuery中getJSON跨域原理的深入讲解
2020/09/02 jQuery
Python数据类型详解(一)字符串
2016/05/08 Python
Python使用matplotlib模块绘制图像并设置标题与坐标轴等信息示例
2018/05/04 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
pandas数据处理之绘图的实现
2020/06/15 Python
Python实现一个简单的递归下降分析器
2020/08/01 Python
python 怎样进行内存管理
2020/11/10 Python
加拿大时尚少女服装品牌:Garage
2016/10/10 全球购物
八皇后问题,输出了所有情况,不过有些结果只是旋转了90度
2016/08/15 面试题
《孙权劝学》教学反思
2014/04/23 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
演讲稿开场白台词
2014/08/25 职场文书
大学生村官个人对照检查材料(群众路线)
2014/09/26 职场文书
详解Node.js如何处理ES6模块
2021/05/15 Javascript
《吸血鬼:避世 血猎》官宣4.27发售 系列首款大逃杀
2022/04/03 其他游戏