jQuery+ajax读取并解析XML文件的方法


Posted in Javascript onSeptember 09, 2016

本文实例讲述了jQuery+ajax读取并解析XML文件的方法。分享给大家供大家参考,具体如下:

ajax.xml:

<?xml version="1.0" encoding="UTF-8"?>
<stulist>
  <student email="1@1.com">
    <name>zhangsan</name>
    <id>1</id>
  </student>
  <student email="2@2.com">
    <name>lisi</name>
    <id>2</id>
  </student>
</stulist>

demo.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>加载XML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="editplus" />
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(function() {
  $("button").click(function(){
    $.ajax({
      url:'xml/ajax.xml',
      type: 'GET',
      dataType: 'xml',
      timeout: 1000,
      cache:false,
      error: function(xml){
        alert('加载XML文档出错');
      },
      success: function(xml){
        //建立一个代码片段
        var frag=$("<ul/>");
        //遍历所有student节点
        $(xml).find("student").each(function(i){
          //获取id节点
          var id=$(this).children("id"),
          //获取节点文本
            id_value=id.text(),
          //获取student下的email属性。
            email=$(this).attr("email");
          //构造HTML字符串,通过append方法添加进之前建立代码片段
          frag.append("<li>"+id_value+"-"+email+"</li>");
        });
        //最后得到的frag添加进HTML文档中
        frag.appendTo("#load");
      }
    });
  });
});
</script>
</head>
<body>
<button>加载</button>
<div id="load"></div>
</body>
</html>

效果图:

jQuery+ajax读取并解析XML文件的方法

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
使用pm2自动化部署node项目的方法步骤
Jan 28 Javascript
JS使用JSON.parse(),JSON.stringify()实现对对象的深拷贝功能分析
Mar 06 Javascript
JavaScript实现星级评价效果
May 17 Javascript
JavaScript函数式编程(Functional Programming)声明式与命令式实例分析
May 21 Javascript
js脚本中执行java后台代码方法解析
Oct 11 Javascript
js实现一款简单踩白块小游戏(曾经很火)
Dec 02 Javascript
js实现烟花特效
Mar 02 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
Apr 10 Javascript
jQuery是用来干什么的 jquery其实就是一个js框架
Feb 04 jQuery
js实现Element中input组件的部分功能并封装成组件(实例代码)
Mar 02 Javascript
JS与jQuery实现隔行变色的方法
Sep 09 #Javascript
jQuery层次选择器用法示例
Sep 09 #Javascript
jQuery基本过滤选择器用法示例
Sep 09 #Javascript
jQuery可见性过滤选择器用法示例
Sep 09 #Javascript
javascript比较语义化版本号的实现代码
Sep 09 #Javascript
js防阻塞加载的实现方法
Sep 09 #Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 #Javascript
You might like
Laravel实现用户注册和登录
2015/01/23 PHP
thinkPHP5.1框架使用SemanticUI实现分页功能示例
2019/08/03 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
纯CSS3实现质感细腻丝滑按钮
2021/03/09 HTML / CSS
【消息提示组件】,兼容IE6/7&amp;&amp;FF2
2007/09/04 Javascript
ajax无刷新动态调用股票信息(改良版)
2008/11/01 Javascript
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
jQuery中children()方法用法实例
2015/01/07 Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
2015/05/20 Javascript
推荐10 个很棒的 jQuery 特效代码
2015/10/04 Javascript
基于javascript bootstrap实现生日日期联动选择
2016/04/07 Javascript
javascript简单实现等比例缩小图片的方法
2016/07/27 Javascript
js接收并转化Java中的数组对象的方法
2016/08/11 Javascript
Bootstrap CSS组件之面包屑导航(breadcrumb)
2016/12/17 Javascript
JQuery 获取Dom元素的实例讲解
2017/07/08 jQuery
vue登录注册及token验证实现代码
2017/12/14 Javascript
JavaScript+Canvas实现彩色图片转换成黑白图片的方法分析
2018/07/31 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
详解JavaScript 作用域
2020/07/14 Javascript
[02:55]2018DOTA2国际邀请赛勇士令状不朽珍藏Ⅲ饰品一览
2018/08/01 DOTA
python 获取list特定元素下标的实例讲解
2018/04/09 Python
python通过伪装头部数据抵抗反爬虫的实例
2018/05/07 Python
基于python的selenium两种文件上传操作实现详解
2019/09/19 Python
python中子类与父类的关系基础知识点
2021/02/02 Python
英国第一家领先的在线处方眼镜零售商:Glasses Direct
2018/02/23 全球购物
会计求职自荐信
2014/06/20 职场文书
学校法制宣传月活动总结
2014/07/03 职场文书
2014大学生党员评议个人总结
2014/09/22 职场文书
2014年感恩节活动策划方案
2014/10/06 职场文书
2014年图书管理员工作总结
2014/12/01 职场文书
劳模事迹材料范文
2014/12/24 职场文书
2015年酒店客房部工作总结
2015/04/25 职场文书
暂住证明怎么写
2015/06/19 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
maven依赖的version声明控制方式
2022/01/18 Java/Android
德劲DE1105机评
2022/04/05 无线电