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 数据类型之Boolean类型分析介绍
Apr 19 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
微信小程序模板之分页滑动栏
Feb 10 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
angular中如何绑定iframe中src的方法
Feb 01 Javascript
layui实现三级联动效果
Jul 26 Javascript
js针对图片加载失败的处理方法分析
Aug 24 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
vscode 插件开发 + vue的操作方法
Jun 05 Javascript
解决VUE-Router 同一页面第二次进入不刷新的问题
Jul 22 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
国产PHP开发框架myqee新手快速入门教程
2014/07/14 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
Jquery 常用方法经典总结
2010/01/28 Javascript
js+css实现的简单易用兼容好的分页
2013/12/30 Javascript
浅析JavaScript基本类型与引用类型
2014/05/28 Javascript
JavaScript中的无阻塞加载性能优化方案
2014/10/10 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
jQuery实现响应浏览器缩放大小并改变背景颜色
2014/10/31 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
JavaScript对象数组排序函数及六个用法
2015/12/23 Javascript
详解JavaScript的AngularJS框架中的作用域与数据绑定
2016/03/04 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
2016/08/05 Javascript
AngularJS控制器详解及示例代码
2016/08/16 Javascript
AngularJS入门教程之Cookies读写操作示例
2016/11/02 Javascript
探究JavaScript中的五种事件处理程序方式
2016/12/07 Javascript
jQuery焦点图左右转换效果
2016/12/12 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
2017/05/07 Javascript
BootStrap Table复选框默认选中功能的实现代码(从数据库获取到对应的状态进行判断是否为选中状态)
2017/07/11 Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
2017/12/22 Javascript
python读取excel表格生成erlang数据
2017/08/26 Python
详解Python3中ceil()函数用法
2019/02/19 Python
利用python实现AR教程
2019/11/20 Python
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
西班牙国家航空官方网站:Iberia
2017/11/16 全球购物
Weblogc domain问题
2014/01/27 面试题
C#如何允许一个类被继承但是避免这个类的方法被重载?
2015/02/24 面试题
播音主持女孩的自我评价分享
2013/11/20 职场文书
高二物理教学反思
2014/02/08 职场文书
承诺书范本大全
2015/05/04 职场文书
防卫过当辩护词
2015/05/21 职场文书
初中语文教学随笔
2015/08/15 职场文书
2016年教师党员公开承诺书
2016/03/24 职场文书
《水浒传》读后感3篇(范文)
2019/09/19 职场文书
把77A收信机改造成收音机
2022/04/05 无线电
Python  lambda匿名函数和三元运算符
2022/04/19 Python