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 表单进行客户端验证demo
Aug 24 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
arguments对象验证函数的参数是否合法
Jun 26 Javascript
javascript同步服务器时间和同步倒计时小技巧
Sep 24 Javascript
jQuery点击改变class并toggle及toggleClass()方法定义用法
Dec 11 Javascript
jQuery基础_入门必看知识点
Jul 04 Javascript
JavaScript实现Fly Bird小游戏
Dec 15 Javascript
利用canvas实现的加载动画效果实例代码
Jul 05 Javascript
Vue-Access-Control 前端用户权限控制解决方案
Dec 01 Javascript
Angular4.0中引入laydate.js日期插件的方法教程
Dec 25 Javascript
图文介绍Vue父组件向子组件传值
Feb 17 Javascript
es6函数之箭头函数用法实例详解
Apr 25 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采集文章中的图片获取替换到本地(实现代码)
2013/07/08 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
php使用curl伪造来源ip和refer的方法示例
2018/05/08 PHP
使用PHPWord生成word文档的方法详解
2019/06/06 PHP
通过PHP实现获取访问用户IP
2020/05/09 PHP
强制设为首页代码
2006/06/19 Javascript
JQuery 操作select标签实现代码
2010/05/14 Javascript
js中将HTMLCollection/NodeList/伪数组转换成数组的代码
2011/07/31 Javascript
javascript定义变量时加var与不加var的区别
2014/12/22 Javascript
使用ngView配合AngularJS应用实现动画效果的方法
2015/06/19 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
JS+CSS简单树形菜单实现方法
2015/09/12 Javascript
在bootstrap中实现轮播图实例代码
2017/06/11 Javascript
Vue Cli与BootStrap结合实现表格分页功能
2017/08/18 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
2017/08/21 Javascript
jquery ztree实现右键收藏功能
2017/11/20 jQuery
微信小程序实现tab切换效果
2017/11/21 Javascript
微信小程序如何修改radio和checkbox的默认样式和图标
2019/07/24 Javascript
浅谈layer的Icon样式以及一些常用的layer窗口使用方法
2019/09/11 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
[50:22]完美盛典-2018年度红毯走秀
2018/12/16 DOTA
[50:02]完美世界DOTA2联赛PWL S2 Magma vs FTD 第三场 11.29
2020/12/03 DOTA
Python3中正则模块re.compile、re.match及re.search函数用法详解
2018/06/11 Python
Python使用Pandas库实现MySQL数据库的读写
2019/07/06 Python
Pytorch根据layers的name冻结训练方式
2020/01/06 Python
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
肯尼迪就职演说稿
2013/12/31 职场文书
小学少先队活动方案
2014/02/18 职场文书
创新型城市实施方案
2014/03/06 职场文书
办公室主任竞聘演讲稿
2014/05/15 职场文书
2014领导班子四风剖析对照检查材料思想汇报
2014/09/20 职场文书
企业法律事务工作总结
2015/08/11 职场文书
2016年学校招生广告语
2016/01/28 职场文书
python opencv将多个图放在一个窗口的实例详解
2022/02/28 Python
集英社今正式宣布 成立游戏公司“集英社Games”
2022/03/31 其他游戏