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 相关文章推荐
arguments对象
Nov 20 Javascript
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
JS 面向对象之神奇的prototype
Feb 26 Javascript
js验证输入是否为手机号码或电话号码示例
Dec 30 Javascript
ionic实现可滑动的tab选项卡切换效果
Apr 15 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
JavaScript“尽快失败”的原则实例详解
Oct 08 Javascript
JavaScript中setTimeout的那些事儿
Nov 14 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
Mar 12 Javascript
Vue3 实现双盒子定位Overlay的示例
Dec 22 Vue.js
Angular性能优化之第三方组件和懒加载技术
May 10 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
社区(php&amp;&amp;mysql)六
2006/10/09 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
ThinkPHP之foreach标签使用概述
2014/06/30 PHP
使用jQuery的ajax功能实现的RSS Reader 代码
2009/09/03 Javascript
HTML node相关的一些资料整理
2010/01/01 Javascript
jQuery模拟超链接点击效果代码
2013/04/21 Javascript
jquery插件开发之实现jquery手风琴功能分享
2014/03/10 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
JavaScript 数组- Array的方法总结(推荐)
2016/07/21 Javascript
利用Blob进行文件上传的完整步骤
2018/08/02 Javascript
原生js实现瀑布流效果
2020/03/09 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
vue常用高阶函数及综合实例
2021/02/25 Vue.js
python动态参数用法实例分析
2015/05/25 Python
Python实现SSH远程登陆,并执行命令的方法(分享)
2017/05/08 Python
python3学习之Splash的安装与实例教程
2018/07/09 Python
python反编译学习之字节码详解
2019/05/19 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
PyCharm永久激活方式(推荐)
2020/09/22 Python
python实现扫雷小游戏
2020/04/24 Python
Python中操作各种多媒体,视频、音频到图片的代码详解
2020/06/04 Python
Python+OpenCV图像处理—— 色彩空间转换
2020/10/22 Python
CSS3模拟IOS滑动开关效果
2016/09/28 HTML / CSS
大四学生毕业自荐信
2013/11/07 职场文书
高一自我鉴定
2013/12/17 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
五年级音乐教学反思
2014/02/06 职场文书
2014年党员自我评议对照检查材料
2014/09/20 职场文书
企业党员个人自我评价
2014/09/20 职场文书
秋冬农业生产标语
2014/10/09 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2015年度培训工作总结范文
2015/04/02 职场文书
2016年幼儿园教师政治学习心得体会
2016/01/23 职场文书
详解SQL的窗口函数
2022/04/21 Oracle
Python first-order-model实现让照片动起来
2022/06/25 Python
win10搭建配置ftp服务器的方法
2022/08/05 Servers