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 相关文章推荐
jQuery插件-jRating评分插件源码分析及使用方法
Dec 28 Javascript
JavaScript实现继承的4种方法总结
Oct 16 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
Node.js实现文件上传
Jul 05 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JavaScript数组迭代方法
Mar 03 Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
浅谈redux, koa, express 中间件实现对比解析
May 23 Javascript
react的hooks的用法详解
Oct 12 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 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
探讨PHP函数ip2long转换IP时数值太大产生负数的解决方法
2013/06/06 PHP
PHP实现采集抓取淘宝网单个商品信息
2015/01/08 PHP
php 广告点击统计代码(php+mysql)
2018/02/21 PHP
jQuery中[attribute*=value]选择器用法实例
2014/12/31 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
jQuery中使用each处理json数据
2015/04/23 Javascript
JavaScript操作XML文件之XML读取方法
2015/06/09 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
详解Jquery的事件操作和文档操作
2016/12/19 Javascript
js实现图片旋转 js滚动鼠标中间对图片放大缩小
2017/07/05 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
JavaScript实现百度搜索框效果
2020/03/26 Javascript
解决淘宝cnpm 安装后cnpm不是内部或外部命令的问题
2018/05/17 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
JS运算符简单用法示例
2020/01/19 Javascript
微信小程序自定义支持图片的弹窗
2020/12/21 Javascript
python实现爬虫下载美女图片
2015/07/14 Python
Flask框架中密码的加盐哈希加密和验证功能的用法详解
2016/06/07 Python
python对离散变量的one-hot编码方法
2018/07/11 Python
python的mysql数据库建立表与插入数据操作示例
2019/09/30 Python
pycharm双击无响应(打不开问题解决办法)
2020/01/10 Python
Python+unittest+DDT实现数据驱动测试
2020/11/30 Python
通过HTML5 Canvas API绘制弧线和圆形的教程
2016/03/14 HTML / CSS
介绍一下代理模式(Proxy)
2014/10/17 面试题
周年庆典邀请函范文
2014/01/23 职场文书
毕业生个人求职自荐信
2014/02/26 职场文书
幼儿园元旦活动感言
2014/03/02 职场文书
学员自我鉴定
2014/03/19 职场文书
请假条标准格式规范
2014/04/10 职场文书
2014年预备党员端正入党动机思想汇报
2014/09/13 职场文书
2014年纪检部工作总结
2014/11/12 职场文书
小学庆六一主持词
2015/06/30 职场文书
经典祝酒词大全
2015/08/12 职场文书
学校标语口号大全
2015/12/26 职场文书
Golang Gob编码(gob包的使用详解)
2021/05/07 Golang
SpringBoot整合Mybatis Generator自动生成代码
2021/08/23 Java/Android