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 相关文章推荐
javascript不同页面传值的改进版
Sep 30 Javascript
JQuery动画和停止动画实例代码
Mar 01 Javascript
触屏中的JavaScript事件分析
Feb 06 Javascript
JQuery中DOM事件冒泡实例分析
Jun 13 Javascript
jQuery实用技巧必备(下)
Nov 03 Javascript
省市联动效果的简单实现代码(推荐)
Jun 06 Javascript
shiro授权的实现原理
Sep 21 Javascript
原生JS实现图片无缝滚动方法(附带封装的运动框架)
Oct 01 Javascript
解决vue-cli webpack打包后加载资源的路径问题
Sep 25 Javascript
详解Vue.js自定义tipOnce指令用法实例
Dec 19 Javascript
vue实现公共方法抽离
Jul 31 Javascript
小程序自定义圆形进度条
Nov 17 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 和 MySQL 开发的 8 个技巧
2006/10/09 PHP
通过php添加xml文档内容的方法
2015/01/23 PHP
PHP模拟登陆163邮箱发邮件及获取通讯录列表的方法
2015/03/07 PHP
PHP全局变量与超级全局变量区别分析
2016/04/01 PHP
PHP+JavaScript实现无刷新上传图片
2017/02/21 PHP
分享一个自定义的console类 让你不再纠结JS中的调试代码的兼容
2012/04/20 Javascript
Javascript Object 对象学习笔记
2014/12/17 Javascript
卸载安装Node.js与npm过程详解
2016/08/15 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
JavaScript编写棋盘覆盖代码详解
2017/08/28 Javascript
Vue自定义过滤器格式化数字三位加一逗号实现代码
2018/03/23 Javascript
使用ng-packagr打包Angular的方法示例
2018/09/21 Javascript
vue forEach循环数组拿到自己想要的数据方法
2018/09/21 Javascript
微信小程序ibeacon三点定位详解
2018/10/31 Javascript
ES6中异步对象Promise用法详解
2019/07/31 Javascript
vue中组件通信的八种方式(值得收藏!)
2019/08/09 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
详解vue 组件
2020/06/11 Javascript
原生js实现html手机端城市列表索引选择城市
2020/06/24 Javascript
vue实现简易的双向数据绑定
2020/12/29 Vue.js
Python使用urllib2获取网络资源实例讲解
2013/12/02 Python
一个月入门Python爬虫学习,轻松爬取大规模数据
2018/01/03 Python
tensorflow构建BP神经网络的方法
2018/03/12 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python Manager 之dict KeyError问题的解决
2019/12/21 Python
python GUI库图形界面开发之PyQt5开发环境配置与基础使用
2020/02/25 Python
Python3 assert断言实现原理解析
2020/03/02 Python
关于python3.9安装wordcloud出错的问题及解决办法
2020/11/02 Python
安装pyinstaller遇到的各种问题(小结)
2020/11/20 Python
html5中svg canvas和图片之间相互转化思路代码
2014/01/24 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
初中生自我评价
2014/02/01 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
乡镇领导班子四风整顿行动工作汇报
2014/10/25 职场文书
模范班主任事迹材料
2014/12/17 职场文书
Jedis操作Redis实现模拟验证码发送功能
2021/09/25 Redis