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实现仿QQ秀换装效果的方法
Mar 04 Javascript
JavaScript中的some()方法使用详解
Jun 09 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
js实现点击文本框显示日期选择器特效代码分享
May 21 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
全面解析Bootstrap中nav、collapse的使用方法
May 22 Javascript
js实现简单的碰壁反弹效果
Aug 30 Javascript
在一个页面重复使用一个js函数的方法详解
Dec 26 Javascript
Bootstrap模态框使用详解
Feb 15 Javascript
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查
Apr 28 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
Nov 02 Javascript
vue实现密码显示与隐藏按钮的自定义组件功能
Apr 23 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
玛琪朵 Macchiato
2021/03/03 咖啡文化
PHP数据库操作之基于Mysqli的数据库操作类库
2014/04/19 PHP
php实现无限级分类查询(递归、非递归)
2016/03/10 PHP
详解PHP的Yii框架中的Controller控制器
2016/03/29 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
根据一段代码浅谈Javascript闭包
2010/12/14 Javascript
Jquery之Ajax运用 学习运用篇
2011/09/26 Javascript
基于jquery ajax 用户无刷新登录方法详解
2012/04/28 Javascript
js运动框架_包括图片的淡入淡出效果
2013/05/11 Javascript
手机号码,密码正则验证
2014/09/04 Javascript
javascript实现简单的省市区三级联动
2015/05/14 Javascript
Active控件问题小结(附解决办法)
2016/06/09 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
原生js开发的日历插件
2017/02/04 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
jQuery实现动态生成表格并为行绑定单击变色动作的方法
2017/04/17 jQuery
JS实现带动画的回到顶部效果
2017/12/28 Javascript
常用的 JS 排序算法 整理版
2018/04/05 Javascript
原生JS实现萤火虫效果
2020/03/07 Javascript
JS highcharts实现动态曲线代码示例
2020/10/16 Javascript
详解Python装饰器由浅入深
2016/12/09 Python
python实现字符串完美拆分split()的方法
2019/07/16 Python
python使用flask与js进行前后台交互的例子
2019/07/19 Python
Transpose 数组行列转置的限制方式
2020/02/11 Python
tensorflow pb to tflite 精度下降详解
2020/05/25 Python
Omio中国:全欧洲低价大巴、火车和航班搜索和比价
2018/08/09 全球购物
内科护士实习自我鉴定
2013/10/17 职场文书
2013年学期结束动员演讲稿
2014/01/07 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
公证委托书模板
2014/04/03 职场文书
运动会的口号
2014/06/09 职场文书
放假通知范文
2015/04/14 职场文书
2016小学优秀教师先进事迹材料
2016/02/26 职场文书
导游词之河北滦平金山岭长城
2019/10/16 职场文书
如何用PHP实现多线程编程
2021/05/26 PHP
Python中tqdm的使用和例子
2022/09/23 Python