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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
js 数组实现一个类似ruby的迭代器
Oct 27 Javascript
extJs 下拉框联动实现代码
Apr 09 Javascript
从零开始学习jQuery (八) 插播:jQuery实施方案
Feb 23 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
浅谈类似于(function(){}).call()的js语句
Mar 30 Javascript
JavaScript获取网页中第一个链接ID的方法
Apr 03 Javascript
在vue-cli脚手架中配置一个vue-router前端路由
Jul 03 Javascript
详解JavaScript按概率随机生成事件
Aug 02 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
JavaScript实现图片合成下载的示例
Nov 19 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核心代码分析require和include的区别
2011/01/02 PHP
实例讲解php实现多线程
2019/01/27 PHP
PHP之header函数详解
2021/03/02 PHP
JS写的数字拼图小游戏代码[学习参考]
2008/10/29 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
js 立即调用的函数表达式如何写
2014/01/12 Javascript
javascript向后台传送相同属性的参数即数组参数
2014/02/17 Javascript
基于Bootstrap实现下拉菜单项和表单导航条(两个菜单项,一个下拉菜单和登录表单导航条)
2016/07/22 Javascript
js 自带的 map() 方法全面了解
2016/08/16 Javascript
谈谈JavaScript的New关键字
2016/08/26 Javascript
JS实现两周内自动登录功能
2017/03/23 Javascript
JavaScript for循环 if判断语句(学习笔记)
2017/10/11 Javascript
vue scroller返回页面记住滚动位置的实例代码
2018/01/29 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
2018/08/30 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
小程序封装wx.request请求并创建接口管理文件的实现
2019/04/29 Javascript
js 将多个对象合并成一个对象 assign方法的实现
2020/09/24 Javascript
对Python中内置异常层次结构详解
2018/10/18 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
python3实现的zip格式压缩文件夹操作示例
2019/08/17 Python
浅谈PyQt5中异步刷新UI和Python多线程总结
2019/12/13 Python
CSS3的文字阴影—text-shadow的使用方法
2012/12/25 HTML / CSS
英国的潮牌鞋履服饰商店:size?
2019/03/26 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
c++工程师面试问题
2013/08/04 面试题
竞争与合作演讲稿
2014/05/12 职场文书
村党支部书记承诺书
2014/05/29 职场文书
新婚姻法离婚协议书范文
2014/11/30 职场文书
护理工作个人总结
2015/03/03 职场文书
创先争优个人总结
2015/03/04 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
每日六道java新手入门面试题,通往自由的道路
2021/06/30 Java/Android
一篇文章告诉你如何实现Vue前端分页和后端分页
2022/02/18 Vue.js
MySQL如何修改字段类型和字段长度
2022/06/10 MySQL
win10忘记pin密码登录不了怎么办?win10忘记pin密码登不进去的解决方法
2022/07/07 数码科技