使用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实现把rgb颜色转换成16进制颜色的方法
Jun 01 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
jquery+html5烂漫爱心表白动画代码分享
Aug 24 Javascript
每天一篇javascript学习小结(Boolean对象)
Nov 12 Javascript
基于BootStrap的图片轮播效果展示实例代码
May 23 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
利用js获取下拉框中所选的值
Dec 01 Javascript
JavaScript 中的12种循环遍历方法【总结】
May 31 Javascript
vue实现表单录入小案例
Sep 27 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 16 Javascript
JavaScript canvas实现文字时钟
Jan 10 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
php URL编码解码函数代码
2009/03/10 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
使用JQUERY进行后台页面布局控制DIV实现左右式
2014/01/07 Javascript
jquery+ajax+text文本框实现智能提示完整实例
2016/07/09 Javascript
JavaScript实现一个空中避难的小游戏
2017/06/06 Javascript
使用vue构建一个上传图片表单
2017/07/04 Javascript
vue2里面ref的具体使用方法
2017/10/27 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
element ui 对话框el-dialog关闭事件详解
2018/02/26 Javascript
vue-router相关基础知识及工作原理
2018/03/16 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
2018/09/27 Javascript
关于element-ui表单中限制输入纯数字的解决方式
2020/09/08 Javascript
[13:16]INFAMOUS vs VGJ T BO3
2018/06/07 DOTA
[50:12]EG vs Fnatic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python break语句详解
2014/03/11 Python
python插入数据到列表的方法
2015/04/30 Python
Python中super关键字用法实例分析
2015/05/28 Python
Python 爬虫的工具列表大全
2016/01/31 Python
Python max内置函数详细介绍
2016/11/17 Python
Pandas实现数据类型转换的一些小技巧汇总
2018/05/07 Python
python 实现生成均匀分布的点
2019/12/05 Python
Python Socketserver实现FTP文件上传下载代码实例
2020/03/27 Python
jupyter notebook 使用过程中python莫名崩溃的原因及解决方式
2020/04/10 Python
Django websocket原理及功能实现代码
2020/11/14 Python
关于python中remove的一些坑小结
2021/01/04 Python
深入解析HTML5使用SVG图像时的viewBox属性用法
2015/09/02 HTML / CSS
美国精品家居用品网站:US-Mattress
2016/08/24 全球购物
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
全球性的奢侈品梦工厂:Forzieri(福喜利)
2019/02/20 全球购物
求职简历自荐信
2013/10/20 职场文书
承诺书范文
2014/06/03 职场文书
食品工程专业求职信
2014/06/15 职场文书
离婚承诺书格式范文
2015/05/04 职场文书
通知怎么写?
2019/04/17 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android