Ajax加载XML文件

本文的主要内容有：
1、ajax加载XML文件
2、XML文件格式
3、jQuery循环( $(xml).find("#tag").each(function(){ ... }) )
4、jQuery动态加载标签

.find("#tag")方法获得当前元素集合中每个元素的后代，通过选择器、jQuery 对象或元素来筛选。
.each(functin(){ ... })方法规定为每个匹配元素规定运行的函数。

.aspx页面

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxGetXML.aspx.cs" Inherits="AjaxGetXML" %>

<!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 runat="server">
    <title></title>
    <script src="JS/jquery-1.7.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $("#btnXml").click(function () {
                $("#tb tr:gt(0)").remove();//在加载时先清除之前加载的数据(全新加载)
                $.ajax({
                    cache: false,//是否读缓存
                    url: "XMLFile.xml",//进行处理的 XML文件
                    dataType: "xml",//预期返回类型为 XML
                    success: function (xml) {
                        $(xml).find("user").each(function () {  //user为节点标识 之后如 id为此节点标识下的子节点
                            var idValue = $(this).children("id").text(); //取 id 节点的文本
                            var nameValue = $(this).children("name").text();
                            var pwdValue = $(this).children("pwd").text();
                            var td = "<tr><td>" + idValue + "</td><td>" + nameValue + "</td><td>" + pwdValue + "</td></tr>"; //拼 tr 值
                            $("#loadXml #tb").append(td);
                        });
                    },error: function () {
                        alert("加载XML数据失败！");
                    }
                })
            })
        })
    </script>
</head>
<body>
    <input type="button" id="btnXml" value="加载XML数据" />
    <form id="form1" runat="server">
    <div id="loadXml">
        <table id="tb">
            <tr><th>序号</th><th>用户名</th><th>密码</th></tr>
        </table>
    </div>
    </form>
    <div>
    <pre>
    本文的主要内容有：
        1、ajax加载XML文件
        2、XML文件格式
        3、jQuery循环(  $(xml).find("#tag").each(function(){ ... })  )
        4、jQuery动态加载标签
    </pre>
    </div>
</body>
</html>

XMLFile.xml页面

<?xml version="1.0" encoding="UTF-8"?>
<userlist>
  <user email="aaa@tt.com">
    <id>1</id>
    <name>张三</name>
    <pwd>zhangsan</pwd>
  </user>
  <user email="bbb@tt.com">
    <id>2</id>
    <name>李四</name>
    <pwd>lisi</pwd>
  </user>
  <user email="ccc@tt.com">
    <id>3</id>
    <name>王五</name>
    <pwd>wangwu</pwd>
  </user>
  <user email="ddd@tt.com">
    <id>4</id>
    <name>赵六</name>
    <pwd>zhaoliu</pwd>
  </user>
</userlist>

Ajax加载XML文件

猜你在找的Ajax相关文章