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常用的返回,自动跳转,刷新,关闭语句汇总
Jan 13 Javascript
浅谈javascript中replace()方法
Nov 10 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
封装获取dom元素的简单实例
Jul 08 Javascript
jquery结合html实现中英文页面切换
Nov 29 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
jQuery、layer实现弹出层的打开、关闭功能
Jun 28 jQuery
深入浅析Vue中的Prop
Jun 10 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
Aug 07 Javascript
详解vue-cli3 中跨域解决方案
Apr 10 Javascript
Vue2.0使用嵌套路由实现页面内容切换/公用一级菜单控制页面内容切换(推荐)
May 08 Javascript
手把手教您实现react异步加载高阶组件
Apr 07 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
PHP 木马攻击防御技巧
2009/06/13 PHP
PHP的基本常识小结
2013/07/05 PHP
利用中国天气预报接口实现简单天气预报
2014/01/20 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
再推荐十款免费的php开发工具
2015/11/09 PHP
完美解决JS中汉字显示乱码问题(已解决)
2006/12/27 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
2013/02/02 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
JS判断网页广告是否被浏览器拦截过滤的代码
2015/04/05 Javascript
多功能jQuery树插件zTree实现权限列表简单实例
2016/07/12 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
纯js三维数组实现三级联动效果
2017/02/07 Javascript
dts文件中删除一个node或属性的操作方法
2018/08/05 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
Vue中android4.4不兼容问题的解决方法
2018/09/04 Javascript
Flutter实现仿微信底部菜单栏功能
2019/09/18 Javascript
Vue 3.0中jsx语法的使用
2020/11/13 Javascript
python写xml文件的操作实例
2014/10/05 Python
python 默认参数问题的陷阱
2016/02/29 Python
Python脚本简单实现打开默认浏览器登录人人和打开QQ的方法
2016/04/12 Python
Python爬虫包 BeautifulSoup  递归抓取实例详解
2017/01/28 Python
Python3使用pandas模块读写excel操作示例
2018/07/03 Python
对Python 内建函数和保留字详解
2018/10/15 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python内置数据类型之列表操作
2018/11/12 Python
Python下opencv图像阈值处理的使用笔记
2019/08/04 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python ftplib模块使用代码实例
2019/12/31 Python
学术会议邀请函范文
2014/01/22 职场文书
投标承诺书范本
2014/03/27 职场文书
私人委托书格式
2014/09/10 职场文书
房屋转让协议书
2014/10/18 职场文书
预备党员转正材料
2014/12/19 职场文书