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 相关文章推荐
JS二维数组的定义说明
Mar 03 Javascript
详解JavaScript中shift()方法的使用
Jun 09 Javascript
JavaScript简单实现弹出拖拽窗口(二)
Jun 17 Javascript
JS实现简单的tab切换选项卡效果
Sep 21 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
Dec 26 Javascript
微信小程序canvas写字板效果及实例
Jun 15 Javascript
JavaScript类的继承方法小结【组合继承分析】
Jul 11 Javascript
p5.js实现故宫橘猫赏秋图动画
Oct 23 Javascript
使用JS来动态操作css的几种方法
Dec 18 Javascript
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 Vue.js
vue判断按钮是否可以点击
Apr 09 Vue.js
原生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
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
使用PHPMailer发送邮件实例
2017/02/15 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
Laravel5.5+ 使用API Resources快速输出自定义JSON方法详解
2020/04/06 PHP
JavaScript 私有成员分析
2009/01/13 Javascript
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
2014/06/15 Javascript
windows8.1+iis8.5下安装node.js开发环境
2014/12/12 Javascript
jQuery使用height()获取高度需要注意的地方
2014/12/13 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
浏览器复制插件zeroclipboard使用指南
2016/03/26 Javascript
ichart.js绘制虚线、平均分虚线效果的实现代码
2016/05/05 Javascript
关于JS中的方法是否加括号的问题
2016/07/27 Javascript
Vue2实现组件props双向绑定
2016/12/02 Javascript
JS图片延迟加载插件LazyImgv1.0用法分析【附demo源码下载】
2017/09/04 Javascript
ES6解构赋值实例详解
2017/10/31 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
vue3.0自定义指令(drectives)知识点总结
2020/12/27 Vue.js
Vue如何实现变量表达式选择器
2021/02/18 Vue.js
[02:08]什么藏在DOTA2 TI9“小紫本”里?斧王历险记告诉你!
2019/05/17 DOTA
python3.5绘制随机漫步图
2018/08/27 Python
Django如何自定义分页
2018/09/25 Python
Python开发之Nginx+uWSGI+virtualenv多项目部署教程
2019/05/13 Python
Django框架教程之中间件MiddleWare浅析
2019/12/29 Python
python输出pdf文档的实例
2020/02/13 Python
python 实现朴素贝叶斯算法的示例
2020/09/30 Python
html+js 实现markdown编辑器效果
2019/10/23 HTML / CSS
面向中国市场的在线海淘美妆零售网站:Beauty House美丽屋
2021/03/02 全球购物
工厂保洁员岗位职责
2013/12/04 职场文书
小摄影师教学反思
2014/04/27 职场文书
五一口号
2014/06/19 职场文书
欢迎标语大全
2014/06/21 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
离婚起诉书范本
2015/05/18 职场文书
男人帮观后感
2015/06/18 职场文书
毕业班工作总结
2015/08/10 职场文书