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 相关文章推荐
Javascript Jquery 遍历Json的实现代码
Mar 31 Javascript
javascript中的float运算精度实例分析
Aug 21 Javascript
jquery获得同源iframe内body下标签的值的方法
Sep 25 Javascript
jQuery+PHP实现可编辑表格字段内容并实时保存
Oct 09 Javascript
jQuery实现的仿百度分页足迹效果代码
Oct 30 Javascript
Bootstrap每天必学之前端开发框架
Nov 19 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
Apr 06 Javascript
jQuery实现指定区域外单击关闭指定层的方法【经典】
Jun 22 Javascript
基于Vuex无法观察到值变化的解决方法
Mar 01 Javascript
CKEditor4配置与开发详细中文说明文档
Oct 08 Javascript
node crawler如何添加promise支持
Feb 01 Javascript
js实现简单抽奖功能
Nov 24 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
php+mysql 实现身份验证代码
2010/03/24 PHP
一款简单实用的php操作mysql数据库类
2014/12/08 PHP
php微信公众号开发模式详解
2016/11/28 PHP
PHP时间类完整代码实例
2021/02/26 PHP
js控制表单奇偶行样式的简单方法
2013/07/31 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
javascript自启动函数的问题探讨
2013/10/05 Javascript
浅谈JavaScript的事件
2015/02/27 Javascript
JS实现六边形3D拖拽翻转效果的方法
2016/09/11 Javascript
JS数组排序方法实例分析
2016/12/16 Javascript
bootstrap datetimepicker日期插件超详细使用方法介绍
2017/02/23 Javascript
jQuery条件分页 代替离线查询(附代码)
2017/08/17 jQuery
AngularJs 最新验证手机号码的实例,成功测试通过
2017/11/26 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
vue.js+element-ui动态配置菜单的实例
2018/09/07 Javascript
Vue-Quill-Editor富文本编辑器的使用教程
2018/09/21 Javascript
Vue触发式全局组件构建的方法
2018/11/28 Javascript
使用pm2部署node生产环境的方法步骤
2019/03/09 Javascript
关于vue项目中搜索节流的实现代码
2019/09/17 Javascript
Python编程中实现迭代器的一些技巧小结
2016/06/21 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
python实现切割url得到域名、协议、主机名等各个字段的例子
2019/07/25 Python
python3实现绘制二维点图
2019/12/04 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
Python while循环使用else语句代码实例
2020/02/07 Python
解决echarts中饼图标签重叠的问题
2020/05/16 Python
新手常见Python错误及异常解决处理方案
2020/06/18 Python
Opencv python 图片生成视频的方法示例
2020/11/18 Python
50个强大璀璨的CSS3/JS技术运用实例
2010/02/27 HTML / CSS
马德里竞技官方网上商店:Atletico Madrid Shop
2019/03/31 全球购物
SQL里面如何插入自动增长序列号字段
2012/03/29 面试题
人力资源管理专业毕业生推荐信
2013/11/07 职场文书
爱国口号
2014/06/19 职场文书
房地产经营管理专业自荐信
2014/09/02 职场文书
python基础之爬虫入门
2021/05/10 Python
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python