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 相关文章推荐
JS 操作符整理[推荐收藏]
Nov 15 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
JSON字符串转换JSONObject和JSONArray的方法
Jun 03 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
浅谈Vue Element中Select下拉框选取值的问题
Mar 01 Javascript
node基于async/await对mysql进行封装
Jun 20 Javascript
详解Typescript 内置的模块导入兼容方式
May 31 Javascript
Vue实现Header渐隐渐现效果的实例代码
Nov 05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue组件的路由高亮问题解决方法
May 11 Vue.js
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
Zend Framework教程之Application用法实例详解
2016/03/14 PHP
csdn 博客的css样式 v3
2009/02/24 Javascript
Exitjs获取DataView中图片文件名
2009/11/26 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
javascript函数重载解决方案分享
2014/02/19 Javascript
JavaScript监听和禁用浏览器回车事件实例
2015/01/31 Javascript
jQuery插件zepto.js简单实现tab切换
2015/06/16 Javascript
使用AngularJS编写较为优美的JavaScript代码指南
2015/06/19 Javascript
javascript类型系统 Window对象学习笔记
2016/01/07 Javascript
JavaScript中的原型继承基础学习教程
2016/05/06 Javascript
深入浅析JavaScript中的Function类型
2016/07/09 Javascript
jQuery实现根据滚动条位置加载相应内容功能
2016/07/18 Javascript
javascript中Number的方法小结
2016/11/21 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
2016/12/13 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
vue2.0 中#$emit,$on的使用详解
2017/06/07 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
vue中$set的使用(结合在实际应用中遇到的坑)
2018/07/10 Javascript
微信小程序中遇到的iOS兼容性问题小结
2018/11/14 Javascript
Vue中错误图片的处理的实现代码
2019/11/07 Javascript
Vue-axios-post数据后端接不到问题解决
2020/01/09 Javascript
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python带动态参数功能的sqlite工具类
2018/05/26 Python
使用虚拟环境打包python为exe 文件的方法
2019/08/29 Python
使用Tkinter制作信息提示框
2020/02/18 Python
Python ATM功能实现代码实例
2020/03/19 Python
让IE下支持Html5的placeholder属性的插件
2014/09/02 HTML / CSS
英国家电购物网站:Sonic Direct
2019/03/26 全球购物
自动一体化专业求职信
2014/03/15 职场文书
酒鬼酒广告词
2014/03/21 职场文书
医药公司采购员岗位职责
2014/09/12 职场文书
小学班级口号大全
2015/12/25 职场文书
学校2016年九九重阳节活动总结
2016/04/01 职场文书
opencv 分类白天与夜景视频的方法
2021/06/05 Python
七个非常实用的Python工具包总结
2021/06/15 Python