JQuery解析XML的方法小结


Posted in Javascript onApril 02, 2016

本文实例总结了JQuery解析XML的方法。分享给大家供大家参考,具体如下:

用JavaScript解析XML数据是常见的编程任务,JavaScript能做的,JQuery当然也能做。下面我们来总结几个使用JQuery解析XML的例子。

第一种方案:

<script type="text/javascript">
$(document).ready(function() {
  $.ajax({
     url: 'http://localhost/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://localhost/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即为可以读取使用的内容,具体读取见第2点
});

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();//读取子节点的值
});

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
疯掉了,尽然有js写的操作系统
Apr 23 Javascript
jquery选择器(常用选择器说明)
Sep 28 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
javascript中in运算符用法分析
Apr 28 Javascript
jQuery操作cookie
Aug 08 Javascript
微信小程序 wx.login解密出现乱码的问题解决办法
Mar 10 Javascript
JS实现移动端触屏拖拽功能
Jul 31 Javascript
使用Vue开发自己的Chrome扩展程序过程详解
Jun 21 Javascript
在vue中高德地图引入和轨迹的绘制的实现
Oct 11 Javascript
小程序跳转到的H5页面再跳转回跳小程序的方法
Mar 06 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
javascript HTML5文件上传FileReader API
Mar 27 #Javascript
JavaScript中文件上传API详解
Apr 01 #Javascript
jquery表单验证插件formValidator使用方法
Apr 01 #Javascript
jquery分页插件jquery.pagination.js实现无刷新分页
Apr 01 #Javascript
jquery分页插件jquery.pagination.js使用方法解析
Apr 01 #Javascript
jQuery实现下拉加载功能实例代码
Apr 01 #Javascript
Extjs实现下拉菜单效果
Apr 01 #Javascript
You might like
php ftp文件上传函数(基础版)
2010/06/03 PHP
基于php split()函数的用法详解
2013/06/05 PHP
PHP中VC6、VC9、TS、NTS版本的区别与用法详解
2013/10/26 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
WordPress中邮件的一些修改和自定义技巧
2015/12/15 PHP
php常用图片处理类
2016/03/16 PHP
Laravel框架中Blade模板的用法示例
2017/08/30 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
摘自百度的图片轮换效果代码
2007/11/19 Javascript
chrome浏览器不支持onmouseleave事件的解决技巧
2013/05/31 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
jQuery实现获取隐藏div高度的方法示例
2017/02/09 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
JavaScript正则表达式简单实用实例
2017/06/23 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
react+redux的升级版todoList的实现
2017/12/18 Javascript
浅谈Redux中间件的实践
2018/07/27 Javascript
解决layer弹出层的内容页点击按钮跳转到新的页面问题
2019/09/14 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
2020/11/05 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
python实现list元素按关键字相加减的方法示例
2017/06/09 Python
利用python3随机生成中文字符的实现方法
2017/11/24 Python
详解K-means算法在Python中的实现
2017/12/05 Python
django项目简单调取百度翻译接口的方法
2019/08/06 Python
TensorFlow保存TensorBoard图像操作
2020/06/23 Python
基于CSS3实现的黑色个性导航菜单效果
2015/09/14 HTML / CSS
canvas 如何绘制线段的实现方法
2018/07/12 HTML / CSS
探索欧洲最好的品牌:Bombinate
2019/06/14 全球购物
Viking Direct爱尔兰:办公用品和家具
2019/11/21 全球购物
一些Unix笔试题和面试题
2012/09/25 面试题
社区七一党员活动方案
2014/01/25 职场文书
《伯牙绝弦》教学反思
2014/03/02 职场文书
小学生国旗下演讲稿
2014/04/25 职场文书
记账会计岗位职责
2014/06/16 职场文书
2016年暑期见闻作文
2015/11/25 职场文书
合理缓解职场压力,让你随时保持最佳状态!
2019/06/21 职场文书