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 相关文章推荐
Javascript - HTML的request类
Jan 09 Javascript
ExtJS 2.2.1的grid控件在ie6中的显示问题
May 04 Javascript
jQuery 常见开发使用技巧总结
Dec 26 Javascript
jquery实现多行文字图片滚动效果示例代码
Oct 10 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
微信小程序页面间通信的5种方式
Mar 31 Javascript
详解webpack编译速度提升之DllPlugin
Feb 05 Javascript
详解JavaScript栈内存与堆内存
Apr 04 Javascript
vue中使用百度脑图kityminder-core二次开发的实现
Sep 26 Javascript
vue.js 实现a标签href里添加参数
Nov 12 Javascript
vue实现div可拖动位置也可改变盒子大小的原理
Sep 16 Javascript
javascript的setTimeout()使用方法总结
Nov 20 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 301转向实现代码
2008/09/18 PHP
JavaScript 页面坐标相关知识整理
2010/01/09 Javascript
JS生成不重复随机数组的函数代码
2014/06/10 Javascript
JS实现仿QQ聊天窗口抖动特效
2015/05/10 Javascript
Javascript表单特效之十大常用原理性样例代码大总结
2016/07/12 Javascript
jQuery新窗口打开外链接
2016/07/21 Javascript
KnockoutJS 3.X API 第四章之数据控制流foreach绑定
2016/10/10 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
利用Javascript实现简单的转盘抽奖
2017/02/13 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
javaScript中&quot;==&quot;和&quot;===&quot;的区别详解
2018/03/16 Javascript
Javascript实现购物车功能的详细代码
2018/05/08 Javascript
Nodejs处理异常操作示例
2018/12/25 NodeJs
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
2019/06/28 Javascript
VSCode Vue开发推荐插件和VSCode快捷键(小结)
2020/08/08 Javascript
python处理大数字的方法
2015/05/27 Python
在Django框架中设置语言偏好的教程
2015/07/27 Python
使用pandas读取csv文件的指定列方法
2018/04/21 Python
浅析python中numpy包中的argsort函数的使用
2018/08/30 Python
详解将Python程序(.py)转换为Windows可执行文件(.exe)
2019/07/19 Python
python中class的定义及使用教程
2019/09/18 Python
德国低价购买灯具和家具网站:Style-home.de
2016/11/25 全球购物
DOM和JQuery对象有什么区别
2016/11/11 面试题
妇产科护士自我鉴定
2013/10/15 职场文书
医药专业推荐信
2013/11/15 职场文书
人事任命书格式
2014/06/05 职场文书
邮政竞聘演讲稿
2014/09/03 职场文书
乡镇党委书记第三阶段个人整改措施
2014/09/16 职场文书
作风整顿个人剖析材料
2014/10/06 职场文书
党委工作总结2015
2015/04/27 职场文书
机械生产实习心得体会
2016/01/22 职场文书
导游词之杭州岳王庙
2019/11/13 职场文书
css3 filter属性的使用简介
2021/03/31 HTML / CSS
Python集合set()使用的方法详解
2022/03/18 Python
python如何利用cv2.rectangle()绘制矩形框
2022/12/24 Python