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 下namespace 功能的简单分析
Jul 05 Javascript
微信支付 JS API支付接口详解
Jul 11 Javascript
AngularJS 依赖注入详解和简单实例
Jul 28 Javascript
解析AngularJS中get请求URL出现的跨域问题
Dec 01 Javascript
Bootstrap基本插件学习笔记之按钮(21)
Dec 08 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
node跨域转发 express+http-proxy-middleware的使用
May 31 Javascript
vue结合axios与后端进行ajax交互的方法
Jul 06 Javascript
在小程序中使用canvas的方法示例
Sep 17 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
Vue.js的模板语法详解
Feb 16 Javascript
JavaScript队列结构Queue实现过程解析
Mar 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中的 == 运算符进行字符串比较
2006/11/26 PHP
PHP和Mysql中转UTF8编码问题汇总
2015/10/10 PHP
PHP实现伪静态方法汇总
2016/01/13 PHP
Laravel模型事件的实现原理详解
2018/03/14 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
经常用到的JavasScript事件的翻译
2007/04/09 Javascript
js 异步处理进度条
2010/04/01 Javascript
jquery 中多条件选择器,相对选择器,层次选择器的区别
2012/07/03 Javascript
js计算字符串长度包含的中文是utf8格式
2013/10/15 Javascript
自定义的一个简单时尚js下拉选择框
2013/11/20 Javascript
js脚本实现数据去重
2014/11/27 Javascript
JavaScript实现下拉列表框数据增加、删除、上下排序的方法
2015/08/11 Javascript
jquery 删除节点 添加节点 找兄弟节点的简单实现
2016/12/07 Javascript
微信小程序学习(4)-系统配置app.json详解
2017/01/12 Javascript
js 函数式编程学习笔记
2017/03/25 Javascript
微信小程序-滚动消息通知的实例代码
2017/08/03 Javascript
解决vue router组件状态刷新消失的问题
2018/08/01 Javascript
vue-cli3中vue.config.js配置教程详解
2019/05/29 Javascript
[15:23]教你分分钟做大人:虚空假面
2014/10/30 DOTA
解决Pycharm无法import自己安装的第三方module问题
2018/05/18 Python
Python中的CSV文件使用&quot;with&quot;语句的方式详解
2018/10/16 Python
浅谈Python接口对json串的处理方法
2018/12/19 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
使用Rasterio读取栅格数据的实例讲解
2019/11/26 Python
Python assert关键字原理及实例解析
2019/12/13 Python
Python爬取数据并实现可视化代码解析
2020/08/12 Python
浅析python中的del用法
2020/09/02 Python
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
公司领导推荐信
2013/11/12 职场文书
大学军训感言400字
2014/03/11 职场文书
八项规定整改方案
2014/10/01 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
导游词300字
2015/02/13 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
Python访问Redis的详细操作
2021/06/26 Python
使用CSS实现小三角边框原理解析
2021/11/07 HTML / CSS