jQuery加载及解析XML文件的方法实例分析


Posted in Javascript onJanuary 22, 2017

本文实例讲述了jQuery加载及解析XML文件的方法。分享给大家供大家参考,具体如下:

1、简述

XML(eXtensible Markup Language)即可扩展标记语言,与HTML一样,都是属于SGML标准通用语言。

2、 Content-Type

很多情况下XML文件不能正常解析都是由于Content-Type没有设置好。如果Content-Type本身就是一个XML文件则不需要设置;如果是由后台程序动态生成的,那么就需要设置Content-Type为“text/xml”,否则jQuery会以默认的“text/html”方式处理,导致解析失败。以下是几种常见语言中设置Content-Type的方式。

header("Content-Type:text/xml");     //PHP
response.ContentType = "text/xml";   //ASP
response.setContentType("text/xm");  //JSP

3、创建实例XML文档(Student.xml)

<?xml version="1.0" encoding="utf-8" ?>
<stulist>
 <student email="peter@163.com">
  <name>peter</name>
  <id>1</id>
 </student>
 <student email="ken@163.com">
  <name>ken</name>
  <id>2</id>
 </student>
</stulist>

4、获取XML

$(document).ready(function() {
  $.ajax({
    url: '/xml/Student.xml',
    type: 'GET',
    dataType: 'xml',
    timeout: 1000, //设定超时
    cache: false,  //禁用缓存
    error: function(xml) {
      alert("加载XML文档出错!");
    },
    success: GetStudentComplete  //设置成功后回调函数
  });
});

通过JQuery的Ajax函数进行读取。

5、 解释XML

//获取XML成功后回调函数
function GetStudentComplete(xml) {
  $(xml).find("student").each(function(i) {   //查找所有student节点并遍历
    var id = $(this).children("id");     //获得子节点
    var id_vaule = id.text();         //获取节点文本
    var email_vaule = $(this).attr("email"); //获取节点的属性
    alert(id_vaule);
    alert(email_vaule);
  });
}

解析XML文档与解析DOM一样,也可以用find()、children()等函数来解析和用each()方法来进行遍历,另外也可以用text()和attr()方法来获取节点文本和属性。

Javascript 相关文章推荐
JavaScript 原型继承之构造函数继承
Aug 26 Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 Javascript
JS+DIV实现鼠标划过切换层效果的实例代码
Nov 26 Javascript
JS兼容浏览器的导出Excel(CSV)文件的方法
May 03 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
Dec 22 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
Bootstrap三种表单布局的使用方法
Jun 21 Javascript
bootstrap的常用组件和栅格式布局详解
May 02 Javascript
React-native桥接Android原生开发详解
Jan 17 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
Aug 23 jQuery
Vue开发环境跨域访问问题
Jan 22 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
原生js实现类似fullpage的单页/全屏滚动
Jan 22 #Javascript
前端开发必知的15个jQuery小技巧
Jan 22 #Javascript
Vue.js学习之过滤器详解
Jan 22 #Javascript
Jquery与Bootstrap实现后台管理页面增删改查功能示例
Jan 22 #Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 #Javascript
Vue.js学习之计算属性
Jan 22 #Javascript
ionic中列表项增加和删除的实现方法
Jan 22 #Javascript
You might like
提问的智慧
2006/10/09 PHP
windows xp下安装pear
2006/12/02 PHP
laravel 5 实现模板主题功能(续)
2015/03/02 PHP
利用PHP_XLSXWriter代替PHPExcel的方法示例
2017/07/16 PHP
PHP基于迭代实现文件夹复制、删除、查看大小等操作的方法
2017/08/11 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
在textarea中屏蔽js的某个function的javascript代码
2007/04/20 Javascript
js树形控件脚本代码
2008/07/24 Javascript
jquery ajax abort()的使用方法
2010/10/28 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
jquery查找tr td 示例模拟
2014/05/08 Javascript
javascript实现模拟时钟的方法
2015/05/13 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
详解Vue 2.0封装axios笔记
2017/06/22 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
2017/12/08 Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
2018/09/21 Javascript
vue实现购物车的监听
2020/04/20 Javascript
Node.js path模块,获取文件后缀名操作
2020/11/07 Javascript
[01:06:54]DOTA2-DPC中国联赛 正赛 RNG vs Dragon BO3 第一场 1月24日
2021/03/11 DOTA
Python读写txt文本文件的操作方法全解析
2016/06/26 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
TensorFlow神经网络优化策略学习
2018/03/09 Python
使用Python实现在Windows下安装Django
2018/10/17 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
python 解决selenium 中的 .clear()方法失效问题
2020/09/01 Python
PyTorch预训练Bert模型的示例
2020/11/17 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
应用心理学个人求职信范文
2013/12/11 职场文书
网络书店创业计划书
2014/02/07 职场文书
好学生评语大全
2014/05/05 职场文书
大学生入党积极分子自我评价
2014/09/20 职场文书
房地产销售经理岗位职责
2015/02/02 职场文书
小学五年级班主任工作经验交流材料
2015/11/02 职场文书
教师远程培训心得体会
2016/01/09 职场文书
python实现过滤敏感词
2021/05/08 Python