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 FLASH幻灯片字符串中有连接符&的处理方法
Mar 01 Javascript
jQuery-ui引入后Vs2008的无智能提示问题解决方法
Feb 10 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
Feb 12 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
Js Jquery创建一个弹出层可加载一个页面
May 08 Javascript
对new functionName()定义一个函数的理解
May 22 Javascript
node.js中的fs.futimesSync方法使用说明
Dec 17 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
swtich/if...else的替代语句
Aug 16 Javascript
详解webpack+vue-cli项目打包技巧
Jun 17 Javascript
Angular数据绑定机制原理
Apr 17 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 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日历程序
2006/12/06 PHP
php file_put_contents()功能函数(集成了fopen、fwrite、fclose)
2011/05/24 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
laravel中的错误与日志用法详解
2016/07/26 PHP
Yii2下session跨域名共存的解决方案
2017/02/04 PHP
PHP实现生成模糊图片的方法示例
2017/12/21 PHP
laravel多条件查询方法(and,or嵌套查询)
2019/10/09 PHP
让你的PHP,APACHE,NGINX支持大文件上传
2021/03/09 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
2014/06/06 Javascript
jquery操作checkbox示例分享
2014/07/21 Javascript
jQuery的animate函数学习记录
2014/08/08 Javascript
js实现多选项切换导航菜单的方法
2015/02/06 Javascript
JavaScript使用addEventListener添加事件监听用法实例
2015/06/01 Javascript
简单学习vue指令directive
2016/11/03 Javascript
vue获取input输入值的问题解决办法
2017/10/17 Javascript
浅谈实现vue2.0响应式的基本思路
2018/02/13 Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
2021/01/08 Vue.js
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
Python中int()函数的用法浅析
2017/10/17 Python
Python批量更改文件名的实现方法
2017/10/29 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
Python中实例化class的执行顺序示例详解
2018/10/14 Python
Python eval的常见错误封装及利用原理详解
2019/03/26 Python
python七夕浪漫表白源码
2019/04/05 Python
Python批量修改图片分辨率的实例代码
2019/07/04 Python
Django框架静态文件处理、中间件、上传文件操作实例详解
2020/02/29 Python
web页面录屏实现
2019/02/12 HTML / CSS
Web时代变迁及html5与html4的区别
2016/01/06 HTML / CSS
复核员上岗演讲稿
2014/01/05 职场文书
幼儿园中班开学寄语
2014/04/03 职场文书
婚庆公司计划书
2014/09/15 职场文书
人工作失职检讨书
2015/05/05 职场文书
2015年小学英语教师工作总结
2015/05/12 职场文书
全网非常详细的pytest配置文件
2022/07/15 Python