使用jquery解析XML的方法


Posted in Javascript onSeptember 05, 2014

本文实例讲述了使用jquery解析XML的方法,分享给大家供大家参考之用。具体方法如下:

一、xml文件结构:books.xml

<?xml version="1.0" encoding="UTF-8"?>
<root>
 <book id="1">
  <name>深入浅出extjs</name>
  <author>张三</author>
  <price>88</price>
 </book>
 <book id="2">
  <name>锋利的jQuery</name>
  <author>李四</author>
  <price>99</price>
 </book>
 <book id="3">
  <name>深入浅出flex</name>
  <author>王五</author>
  <price>108</price>
 </book>
 <book id="4">
  <name>java编程思想</name>
  <author>钱七</author>
  <price>128</price>
 </book>
</root>

二、页面代码:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jquery解析xml</title>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
 $(function(){
  $.post('books.xml',function(data){
   //查找所有的book节点
   var s="";
   $(data).find('book').each(function(i){
    var id=$(this).attr('id');
    var name=$(this).children('name').text();
    var author=$(this).children('author').text();
    var price=$(this).children('price').text();
    s+=id+"    "+name+"    "+author+"    "+price+"<br>";
   });
   $('#mydiv').html(s);
  });
 });
</script>
</head>
<body>
 <div id='mydiv'></div>
</body>
</html>

运行效果图如下:

使用jquery解析XML的方法

感兴趣的读者可以点此本站下载完整代码。

Javascript 相关文章推荐
JavaScript小技巧 2.5 则
Sep 12 Javascript
解析js原生方法创建表格效率测试
Jul 08 Javascript
JS中产生20位随机数以0-9为例也可以是a-z A-Z
Aug 01 Javascript
node.js中的console.timeEnd方法使用说明
Dec 09 Javascript
javascript实现的淘宝旅行通用日历组件用法实例
Aug 03 Javascript
JS实现淡入淡出图片效果的方法分析
Dec 20 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
Feb 06 Javascript
详述 Sublime Text 打开 GBK 格式中文乱码的解决方法
Oct 26 Javascript
JavaScript深拷贝和浅拷贝概念与用法实例分析
Jun 07 Javascript
详解vue 自定义组件使用v-model 及探究其中原理
Oct 11 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
Nov 13 Javascript
vue 组件销毁并重置的实现
Jan 13 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 #Javascript
javascript获取dom的下一个节点方法
Sep 05 #Javascript
原生JavaScript生成GUID的实现示例
Sep 05 #Javascript
javascript动态控制服务器控件实例
Sep 05 #Javascript
setTimeout()递归调用不加引号出错的解决方法
Sep 05 #Javascript
jQuery动态创建html元素的常用方法汇总
Sep 05 #Javascript
jquery单行文字向上滚动效果的实现代码
Sep 05 #Javascript
You might like
Zend Framework中的简单工厂模式 图文
2012/07/10 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(九)
2014/06/24 PHP
jQuery 第二课 操作包装集元素代码
2010/03/14 Javascript
javascript的日期对象、数组对象、二维数组使用说明
2014/12/22 Javascript
Jquery数字上下滚动动态切换插件
2015/08/08 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
Angular发布1.5正式版,专注于向Angular 2的过渡
2016/02/18 Javascript
JavaScript 正则表达式中global模式的特性
2016/02/25 Javascript
利用Angularjs实现幻灯片效果
2016/09/07 Javascript
Bootstrap Modal遮罩弹出层(完整版)
2016/11/21 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
Node.js中使用mongoose操作mongodb数据库的方法
2017/09/12 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
js 图片懒加载的实现
2020/10/21 Javascript
python中的实例方法、静态方法、类方法、类变量和实例变量浅析
2014/04/26 Python
Python中使用dom模块生成XML文件示例
2015/04/05 Python
Python中map和列表推导效率比较实例分析
2015/06/17 Python
python UNIX_TIMESTAMP时间处理方法分析
2016/04/18 Python
flask应用部署到服务器的方法
2019/07/12 Python
python列表推导式操作解析
2019/11/26 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
骆驼官方商城:CAMEL
2016/11/22 全球购物
anello泰国官方网站:日本流行包包品牌
2019/08/08 全球购物
不同浏览器创建XMLHttpRequest方法有什么不同
2014/11/17 面试题
财务副总经理工作职责
2013/11/25 职场文书
建筑设计学生的自我评价
2014/01/16 职场文书
初中同学聚会感言
2014/02/11 职场文书
腾讯广告词
2014/03/19 职场文书
课例研修方案
2014/05/31 职场文书
英语专业自荐书
2014/06/13 职场文书
班级元旦晚会开幕词
2015/01/29 职场文书
同学聚会邀请函
2015/01/30 职场文书
学困生帮扶工作总结
2015/08/13 职场文书
2016年班主任培训心得体会
2016/01/07 职场文书
2016中秋节广告语
2016/01/28 职场文书
送给火锅店的创意营销方案!
2019/07/08 职场文书