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调用图片隐藏&amp;显示实现代码
Sep 13 Javascript
Jquery 返回json数据在IE浏览器中提示下载的问题
May 18 Javascript
jQuery中on()方法用法实例
Jan 19 Javascript
js实现从中间开始往上下展开网页窗口的方法
Mar 02 Javascript
kindeditor修复会替换script内容的问题
Apr 03 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
jquery.validate表单验证插件使用方法解析
Nov 07 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
vue中node_modules中第三方模块的修改使用详解
May 31 Javascript
js回溯法计算最佳旅行线路代码实例
Sep 11 Javascript
Vue根据条件添加click事件的方式
Nov 09 Javascript
node使用async_hooks模块进行请求追踪
Jan 28 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中Date获取时间不正确怎么办
2008/06/05 PHP
解析PHP工厂模式的好处
2013/06/18 PHP
解析用PHP实现var_export的详细介绍
2013/06/20 PHP
PHP文件缓存内容保存格式实例分析
2014/08/20 PHP
四种php中webservice实现的简单架构方法及实例
2015/02/03 PHP
解javascript 混淆加密收藏
2009/01/16 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
jQuery弹出(alert)select选择的值
2013/04/21 Javascript
JavaScript 实现类的多种方法实例
2013/05/01 Javascript
jquery如何把数组变为字符串传到服务端并处理
2014/04/30 Javascript
利用jQuery实现可以编辑的表格
2014/05/26 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery插件ImageDrawer.js实现动态绘制图片动画(附源码下载)
2016/02/25 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jQuery事件委托之Safari
2016/07/05 Javascript
浅谈javascript:两种注释,声明变量,定义函数
2016/09/29 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
浅谈mint-ui loadmore组件注意的问题
2017/11/08 Javascript
React Native中Mobx的使用方法详解
2018/12/04 Javascript
微信小程序实现用table显示数据库反馈的多条数据功能示例
2019/05/07 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
python发腾讯微博代码分享
2014/01/10 Python
python+ffmpeg批量去视频开头的方法
2019/01/09 Python
解决python测试opencv时imread导致的错误问题
2019/01/26 Python
Python 通过截图匹配原图中的位置(opencv)实例
2019/08/27 Python
python中几种自动微分库解析
2019/08/29 Python
python tkinter图形界面代码统计工具(更新)
2019/09/18 Python
浅析Python3 pip换源问题
2020/01/06 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
HMV日本官网:全球知名的音乐、DVD和电脑游戏零售巨头
2016/08/13 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
Java中各种基本数据类型的默认值都是什么
2016/12/22 面试题
大课间体育活动方案
2014/03/12 职场文书
一些让Python代码简洁的实用技巧总结
2021/08/23 Python
windows系统安装配置nginx环境
2022/06/28 Servers