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获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
javascript转换日期字符串为Date日期对象的方法
Feb 13 Javascript
javascript中传统事件与现代事件
Jun 23 Javascript
JS+CSS实现DIV层的展开、收缩效果
Jan 28 Javascript
深入解析jQuery中Deferred的deferred.promise()方法
May 03 Javascript
ajax跨域调用webservice的实现代码
May 09 Javascript
使用JavaScript获取Request中参数的值方法
Sep 27 Javascript
用jquery快速解决IE输入框不能输入的问题
Oct 04 Javascript
在node中使用jwt签发与验证token的方法
Apr 03 Javascript
vue+element创建动态的form表单及动态生成表格的行和列
May 20 Javascript
JavaScript链式调用原理与实现方法详解
May 16 Javascript
html+vue.js 实现漂亮分页功能可兼容IE
Nov 07 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
php+mysql写的简单留言本实例代码
2008/07/25 PHP
PHP+MYSQL实现用户的增删改查
2015/03/24 PHP
php实现RSA加密类实例
2015/03/26 PHP
Yii中的cookie的发送和读取
2016/07/27 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
php使用FFmpeg接口获取视频的播放时长、码率、缩略图以及创建时间
2016/11/07 PHP
PHP常见字符串处理函数用法示例【转换,转义,截取,比较,查找,反转,切割】
2016/12/24 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
javascript XML数据显示为HTML一例
2008/12/23 Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
2013/09/18 Javascript
调整小数的格式保留小数点后两位
2014/05/14 Javascript
Underscore.js常用方法总结
2015/02/28 Javascript
jquery实现简单文字提示效果
2015/12/02 Javascript
jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】
2016/09/14 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
nodejs实现OAuth2.0授权服务认证
2017/12/27 NodeJs
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
原生JS实现的碰撞检测功能示例
2018/05/18 Javascript
详解Angular如何正确的操作DOM
2018/07/06 Javascript
Windows下Python2与Python3两个版本共存的方法详解
2017/02/12 Python
django 删除数据库表后重新同步的方法
2018/05/27 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
详解python中的装饰器
2018/07/10 Python
Python综合应用名片管理系统案例详解
2020/01/03 Python
Python-opencv 双线性插值实例
2020/01/17 Python
如何在django中实现分页功能
2020/04/22 Python
keras多显卡训练方式
2020/06/10 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
美国内衣品牌:Leonisa
2016/08/14 全球购物
交通安全寄语大全
2014/04/08 职场文书
品质口号大全
2014/06/17 职场文书
新郎接新娘保证书
2015/05/08 职场文书
英语读书笔记
2015/07/02 职场文书
爱护公物主题班会
2015/08/17 职场文书
python 对图片进行简单的处理
2021/06/23 Python
Win11运行cmd提示“请求的操作需要提升”的两种解决方法
2022/07/07 数码科技