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 相关文章推荐
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 Javascript
JavaScript实现获得所有兄弟节点的方法
Jul 23 Javascript
js实现鼠标点击左上角滑动菜单效果代码
Sep 06 Javascript
JavaScript中利用各种循环进行遍历的方式总结
Nov 10 Javascript
Angularjs 自定义服务的三种方式(推荐)
Aug 02 Javascript
js实现文字向上轮播功能
Jan 13 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
详解关于html,css,js三者的加载顺序问题
Apr 10 Javascript
详解微信小程序网络请求接口封装实例
May 02 Javascript
vue祖孙组件之间的数据传递案例
Dec 07 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
Feb 23 Vue.js
浅谈TypeScript 索引签名的理解
Oct 16 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 实现类似js中alert() 提示框
2015/03/18 PHP
效率高的Javscript字符串替换函数的benchmark
2008/08/02 Javascript
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
js检查页面上有无重复id的实现代码
2013/07/17 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
浅谈javascript中的三种弹窗
2016/10/21 Javascript
jQuery图片加载显示loading效果
2016/11/04 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
微信小程序 Buffer缓冲区的详解
2017/07/06 Javascript
Vue异步加载about组件
2017/10/31 Javascript
Vue写一个简单的倒计时按钮功能
2018/04/20 Javascript
微信小程序之裁剪图片成圆形的实现代码
2018/10/11 Javascript
vue实现移动端悬浮窗效果
2018/12/01 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
vue.js实现回到顶部动画效果
2019/07/31 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
react使用CSS实现react动画功能示例
2020/05/18 Javascript
python获取指定网页上所有超链接的方法
2015/04/04 Python
Python生成器(Generator)详解
2015/04/13 Python
浅谈python中set使用
2016/06/30 Python
Python构建XML树结构的方法示例
2017/06/30 Python
Python反射和内置方法重写操作详解
2018/08/27 Python
python版本单链表实现代码
2018/09/28 Python
Python将8位的图片转为24位的图片实现方法
2018/10/24 Python
对python numpy.array插入一行或一列的方法详解
2019/01/29 Python
python字典一键多值实例代码分享
2019/06/14 Python
python web框架 django wsgi原理解析
2019/08/20 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
25个CSS3动画按钮和菜单教程分享
2012/10/03 HTML / CSS
租租车:国际租车、美国租车、欧洲租车、特价预订国外租车(中文服务)
2018/03/28 全球购物
元旦晚会策划方案
2014/02/18 职场文书
企业办公室岗位职责
2014/03/12 职场文书
2014年医院个人工作总结
2014/12/09 职场文书
CSS 文字装饰 text-decoration & text-emphasis 详解
2021/04/06 HTML / CSS
position:sticky 粘性定位的几种巧妙应用详解
2021/04/24 HTML / CSS
MySQL中的全表扫描和索引树扫描
2022/05/15 MySQL