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 相关文章推荐
jQuery chili图片远处放大插件
Nov 30 Javascript
bgsound 背景音乐 的一些常用方法及特殊用法小结
May 11 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
May 05 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
vue指令以及dom操作详解
Mar 04 Javascript
JavaScript原生数组Array常用方法
Apr 06 Javascript
vue.js实现单选框、复选框和下拉框示例
Jul 18 Javascript
微信小程序表单验证form提交错误提示效果
Jun 19 Javascript
JS原生带缩略图的图片切换效果
Oct 10 Javascript
Vue+Node实现的商城用户管理功能示例
Dec 23 Javascript
html5中sharedWorker实现多页面通信的示例代码
May 07 Javascript
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
正则表达式语法
2006/10/09 Javascript
PHP下判断网址是否有效的代码
2011/10/08 PHP
比较strtr, str_replace和preg_replace三个函数的效率
2013/06/26 PHP
php将图片保存入mysql数据库失败的解决方法
2014/12/27 PHP
浅谈php7的重大新特性
2015/10/23 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
JavaScript中的console.group()函数详细介绍
2014/12/29 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
2015/08/01 Javascript
原生js编写焦点图效果
2016/12/08 Javascript
基于jquery实现的鼠标悬停提示案例
2016/12/11 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
JS组件系列之MVVM组件构建自己的Vue组件
2017/04/28 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
vue基于Element构建自定义树的示例代码
2017/09/19 Javascript
微信小程序实现动态设置placeholder提示文字及按钮选中/取消状态的方法
2017/12/14 Javascript
js装饰设计模式学习心得
2018/02/17 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
浅谈Vue static 静态资源路径 和 style问题
2020/11/07 Javascript
vue.js+element 默认提示中英文操作
2020/11/11 Javascript
Python两个整数相除得到浮点数值的方法
2015/03/18 Python
python解决js文件utf-8编码乱码问题(推荐)
2018/05/02 Python
pygame实现俄罗斯方块游戏(AI篇1)
2019/10/29 Python
Python中格式化字符串的四种实现
2020/05/26 Python
python 下划线的不同用法
2020/10/24 Python
使用django自带的user做外键的方法
2020/11/30 Python
不同浏览器对CSS3和HTML5的支持状况
2009/10/31 HTML / CSS
Speedo速比涛德国官方网站:世界领先的泳装品牌
2019/08/26 全球购物
环境工程大学生自荐信
2013/10/21 职场文书
电子商务专员岗位职责
2013/12/11 职场文书
护士自我评价
2014/02/01 职场文书
酒店员工检讨书
2014/02/18 职场文书
运动会通讯稿300字
2015/07/20 职场文书
什么是Python装饰器?如何定义和使用?
2022/04/11 Python