编程 Javascript

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程序设计有所帮助。

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

- Author -

onestopweb

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery 研究心得取得属性的值

Nov 30 Javascript

jquery.cookie.js 操作cookie实现记住密码功能的实现代码

Apr 27 Javascript

JS冒泡事件的快速解决方法

Dec 16 Javascript

javascript事件冒泡实例分析

May 13 Javascript

jQuery+CSS实现的网页二级下滑菜单效果

Aug 25 Javascript

JavaScript实现随机数生成器（去重）

Oct 13 Javascript

JS实现的计数排序与基数排序算法示例

Dec 04 Javascript

JS字符串去除连续或全部重复字符的实例

Mar 08 Javascript

vue微信分享到朋友圈 vue微信发送给好友

Nov 28 Javascript

Vue移动端项目实现使用手机预览调试操作

Jul 18 Javascript

element-ui点击查看大图的方法示例

Dec 14 Javascript

JavaScript实现打字游戏

Feb 19 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