jquery解析xml字符串示例分享


Posted in Javascript onMarch 25, 2014

第一种方案:

<script type="text/javascript">
$(document).ready(function() {
 $.ajax({
    url: 'http://www.test.net/cgi/test.xml',
    dataType: 'xml',
    success: function(data){
     //console.log(data);
    $(data).find("channel").find("item").each(function(index, ele) {
    var titles = $(ele).find("title").text();
    var links = $(ele).find("link").text();
    console.log(titles+'-----');
    $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
   });
  }
 });
}) 
</script>
    <div id="noticecon">
  <ol>
  </ol>
 </div>

第二种方案:

<script type="text/javascript">
 $.get("http://www.test.net/cgi/test.xml", function(data){
  $(data).find('channel').find('item').each(function(index, ele){
   var titles = $(ele).find('title').text();
   var links = $(ele).find('link').text();
   $("#noticecon").find('ol').append('<li><a href="'+links+'">'+titles+'</a></li>');
  })
 });
</script>
    <div id="noticecon">
  <ol>
  </ol>
 </div>

一般步骤如下:

1. 读取xml文件

$.get("xmlfile.xml",function(xml){    
 $(xml).find("item").length;    
});

2. 读取xml内容

如果读取的xml是来于xml文件,这结合上面的那点,处理如下:

$.get("xmlfile.xml",function(xml){    
 $(xml).find("item").length;    
});

如果读取的是xml字符串,则要注意一点,xml字符串的必然被"<xml>"和"</xml>"包围才可以被解析

$("<xml><root><item></item></root></xml>").find("item").length;

解析xml内容:

示例xml:

<?xml version="1.0" encoding="utf-8" ?>
<fields>
  <field Name="Name1">
    <fieldname>dsname</fieldname>
    <datatype>字符</datatype>
  </field>
  <field Name="Name2">
    <fieldname>dstype</fieldname>
    <datatype>字符</datatype>
  </field>
</fields>

以下是解析示例代码:

$(xml).find("field").each(function() {
 var field = $(this);
 var fName = field.attr("Name");//读取节点属性
 var dataType = field.find("datatype").text();//读取子节点的值
});
Javascript 相关文章推荐
游戏人文件夹程序 ver 4.03
Jul 14 Javascript
动态添加js事件实现代码
Mar 12 Javascript
点击进行复制的JS代码实例
Aug 23 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
客户端验证用户名和密码的方法详解
Jun 16 Javascript
Js删除数组中某一项或几项的几种方法(推荐)
Jul 27 Javascript
js实现打地鼠小游戏
Feb 13 Javascript
基于jQuery和CSS3实现APPLE TV海报视差效果
Jun 16 jQuery
微信小程序图片自适应支持多图实例详解
Jun 21 Javascript
node使用Koa2搭建web项目的方法
Oct 17 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
May 27 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 Javascript
jquery数组封装使用方法分享(jquery数组遍历)
Mar 25 #Javascript
jquery选择器原理介绍($()使用方法)
Mar 25 #Javascript
Jquery插件编写简明教程
Mar 25 #Javascript
jquery自动填充勾选框即把勾选框打上true
Mar 24 #Javascript
jquery默认校验规则整理
Mar 24 #Javascript
Javascript连接多个数组不用concat来解决
Mar 24 #Javascript
jqeury-easyui-layout问题解决方法
Mar 24 #Javascript
You might like
PHP采集类Snoopy抓取图片实例
2014/06/19 PHP
Win7下手动安装apache2.2、php5.4笔记
2015/04/03 PHP
CI框架AR操作(数组形式)实现插入多条sql数据的方法
2016/05/18 PHP
php set_include_path函数设置 include_path 配置选项
2016/10/30 PHP
PHP实现类似题库抽题效果
2018/08/16 PHP
JAVASCRIPT HashTable
2007/01/22 Javascript
jMessageBox 基于jQuery的窗口插件
2009/12/09 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
使用js实现关闭js弹出层的窗口
2014/02/10 Javascript
Js与下拉列表处理问题解决
2014/02/13 Javascript
使用jquery animate创建平滑滚动效果(可以是到顶部、到底部或指定地方)
2014/05/27 Javascript
浅谈JavaScript数据类型及转换
2015/02/28 Javascript
jquery插件splitScren实现页面分屏切换模板特效
2015/06/16 Javascript
javascript实现随机读取数组的方法
2015/08/03 Javascript
每天一篇javascript学习小结(RegExp对象)
2015/11/17 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
Angular和Vue双向数据绑定的实现原理(重点是vue的双向绑定)
2016/11/22 Javascript
iscroll实现下拉刷新功能
2017/07/18 Javascript
移动端效果之IndexList详解
2017/10/20 Javascript
详解webpack-dev-server使用http-proxy解决跨域问题
2018/01/13 Javascript
JavaScript实现仿Clock ISO时钟
2018/06/29 Javascript
如何封装了一个vue移动端下拉加载下一页数据的组件
2019/01/06 Javascript
vue 监听 Treeselect 选择项的改变操作
2020/08/31 Javascript
Python的Flask框架中实现简单的登录功能的教程
2015/04/20 Python
Python把csv数据写入list和字典类型的变量脚本方法
2018/06/15 Python
python3 flask实现文件上传功能
2020/03/20 Python
python如何求数组连续最大和的示例代码
2020/02/04 Python
什么是python的必选参数
2020/06/21 Python
马来西亚与新加坡长途巴士售票网站:BusOnlineTicket.com
2018/11/05 全球购物
英国奢侈品概念店:Base Blu
2019/05/16 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
武汉东之林科技有限公司机试
2013/09/17 面试题
2014年国培研修感言
2014/03/09 职场文书
2015年教学工作总结
2015/04/02 职场文书
2015年青年志愿者协会工作总结
2015/04/27 职场文书
公司与个人合作协议书
2016/03/19 职场文书