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 字符编码规则
May 04 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
jQuery判断iframe中元素是否存在的方法
May 11 Javascript
javascript调试之DOM断点调试法使用技巧分享
Apr 15 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
JavaScript事件类型中焦点、鼠标和滚轮事件详解
Jan 25 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
koa router 多文件引入的方法示例
May 22 Javascript
30分钟用Node.js构建一个API服务器的步骤详解
May 24 Javascript
Vue+scss白天和夜间模式切换功能的实现方法
Jan 05 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
PHPwind整合最土系统用户同步登录实现方法
2010/12/08 PHP
解析在PHP中使用mysqli扩展库对mysql的操作
2013/07/03 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
Yii2处理密码加密及验证的方法
2019/05/12 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析
2020/04/20 PHP
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
jQuery 开天辟地入门篇一
2009/12/09 Javascript
关于火狐(firefox)及ie下event获取的两种方法
2012/12/27 Javascript
登陆成功后自动计算秒数执行跳转
2014/01/23 Javascript
js中把JSON字符串转换成JSON对象最好的方法
2014/03/21 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
vue组件详解之使用slot分发内容
2018/04/09 Javascript
微信小程序将字符串生成二维码图片的操作方法
2018/07/17 Javascript
[04:21]狐狸妈带你到现场 DOTA2 TI中国区预选赛线下赛路线指引
2014/05/22 DOTA
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
pygame游戏之旅 载入小车图片、更新窗口
2018/11/20 Python
python利用requests库模拟post请求时json的使用教程
2018/12/07 Python
解决python线程卡死的问题
2019/02/18 Python
Python+opencv 实现图片文字的分割的方法示例
2019/07/04 Python
Python字符串大小写转换拼接删除空白
2019/09/19 Python
Python Pickle 实现在同一个文件中序列化多个对象
2019/12/30 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
Python openpyxl模块实现excel读写操作
2020/06/30 Python
使用Python实现音频双通道分离
2020/12/25 Python
魔声耳机官方网站:Monster是世界第一品牌的高性能耳机
2016/10/26 全球购物
天网工程实施方案
2014/03/26 职场文书
大学生学雷锋活动总结
2014/06/26 职场文书
森马旗舰店双十一营销方案
2014/09/29 职场文书
怎样写离婚协议书
2015/01/26 职场文书
美术教师求职信范文
2015/03/20 职场文书
《角的度量》教学反思
2016/02/18 职场文书
关于公司年会的开幕词
2016/03/04 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python