使用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 控制input只允许输入的各种指定内容
Jun 19 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 Javascript
Vue+Mock.js模拟登录和表格的增删改查功能
Jul 26 Javascript
vue.js中proxyTable 转发请求的实现方法
Sep 20 Javascript
JavaScript刷新页面的几种方法总结
Mar 28 Javascript
VUE实现密码验证与提示功能
Oct 18 Javascript
vue 微信扫码登录(自定义样式)
Jan 06 Javascript
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
Vue仿Bibibili首页的问题
Jan 21 Vue.js
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
为什么《星际争霸》是测试人工智能的理想战场
2019/12/03 星际争霸
说明的比较细的php 正则学习实例
2008/07/30 PHP
php jquery 实现新闻标签分类与无刷新分页
2009/12/18 PHP
php+mysqli数据库连接的两种方式
2015/01/28 PHP
Yii净化器CHtmlPurifier用法示例(过滤不良代码)
2016/07/15 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
Jquery + Ajax调用webService实例代码(asp.net)
2010/08/27 Javascript
jquery实现图片预加载
2015/12/25 Javascript
基于JS代码实现图片在页面中旋转效果
2016/06/16 Javascript
js实现三级联动效果(简单易懂)
2017/03/27 Javascript
Angular 4.x 动态创建表单实例
2017/04/25 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
vue单页应用在页面刷新时保留状态数据的方法
2018/09/21 Javascript
JQuery Ajax跨域调用和非跨域调用问题实例分析
2019/04/16 jQuery
详解微信小程序入门从这里出发(登录注册、开发工具、文件及结构介绍)
2020/07/21 Javascript
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python实现机器人行走效果
2018/01/29 Python
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
windows下python安装小白入门教程
2018/09/18 Python
python 判断矩阵中每行非零个数的方法
2019/01/26 Python
Python去除字符串前后空格的几种方法
2019/03/04 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python中pymysql 模块的使用详解
2019/08/12 Python
Pytorch实现基于CharRNN的文本分类与生成示例
2020/01/08 Python
keras自定义回调函数查看训练的loss和accuracy方式
2020/05/23 Python
教你使用Sublime text3搭建Python开发环境及常用插件安装另分享Sublime text3最新激活注册码
2020/11/12 Python
YOOX美国官方网站:全球著名的多品牌时尚网络概念店
2016/09/11 全球购物
Gap中国官网:美式休闲风服饰
2017/02/05 全球购物
L*SPACE官网:比基尼、泳装和度假服装
2019/03/18 全球购物
请写出 float x 与"零值"比较的 if 语句
2016/01/04 面试题
留学自荐信写作方法
2014/01/27 职场文书
《灯光》教学反思
2014/02/08 职场文书
2014年学习部工作总结
2014/11/12 职场文书
2015年乡镇妇联工作总结
2015/05/19 职场文书
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android
Win10 Anaconda安装python-pcl
2022/04/29 Servers