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完美拖拽,可返回拖动轨迹
Mar 29 Javascript
用js判断输入是否为中文的函数
Mar 10 Javascript
Javascript常用字符串判断函数代码分享
Dec 08 Javascript
JavaScript学习小结(一)——JavaScript入门基础
Sep 02 Javascript
第一次接触神奇的Bootstrap表单
Jul 27 Javascript
微信小程序开发(二)图片上传+服务端接收详解
Jan 11 Javascript
原生js编写2048小游戏
Mar 17 Javascript
Vue 2.0在IE11中打开项目页面空白的问题解决
Jul 16 Javascript
node简单实现一个更改头像功能的示例
Dec 29 Javascript
详解如何在react中搭建d3力导向图
Jan 12 Javascript
js回文数的4种判断方法示例
Jun 04 Javascript
使用vue中的混入mixin优化表单验证插件问题
Jul 02 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实现的简单压缩英文字符串的代码
2008/04/24 PHP
php数组查找函数in_array()、array_search()、array_key_exists()使用实例
2014/04/29 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
php识别翻转iphone拍摄的颠倒图片
2018/05/17 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
Javascript 中介者模式实例
2009/12/16 Javascript
关于jquery append() html时的小问题的解决方法
2010/12/16 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
jquery中ajax处理跨域的三大方式
2016/01/05 Javascript
jQuery中slidedown与slideup方法用法示例
2016/09/16 Javascript
jquery实现(textarea)placeholder自动换行
2016/12/22 Javascript
详解js静态资源文件请求的处理
2017/08/01 Javascript
layui 优化button按钮和弹出框的方法
2018/08/15 Javascript
puppeteer实现html截图的示例代码
2019/01/10 Javascript
WebGL three.js学习笔记之阴影与实现物体的动画效果
2019/04/25 Javascript
JavaScript如何借用构造函数继承
2019/11/06 Javascript
Python随机生成带特殊字符的密码
2016/03/02 Python
Python编程修改MP3文件名称的方法
2017/04/19 Python
对Python中的@classmethod用法详解
2018/04/21 Python
Python分支语句与循环语句应用实例分析
2019/05/07 Python
Python Django的安装配置教程图文详解
2019/07/17 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
通过Python实现一个简单的html页面
2020/05/16 Python
Python如何设置指定窗口为前台活动窗口
2020/08/12 Python
python 对象真假值的实例(哪些视为False)
2020/12/11 Python
DNA测试:Orig3n
2019/03/01 全球购物
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
为什么要有struct关键字
2012/05/08 面试题
投标承诺书范本
2014/03/27 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
微电影大赛策划方案
2014/06/05 职场文书
观看安全警示教育片心得体会
2016/01/15 职场文书
学习党章心得体会2016
2016/01/15 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书
2016计算机专业毕业生自荐信
2016/01/28 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书