jQuery操作XML数据（jQuery调用JSON数据学习第八天）

       XML数据已xml为扩展名的文件形式保存，如果修改文件中的数据，必需与服务端配合。使用jQuery向服务端发送请求，由服务端编写代码，修改XML文件的内容。接下来以服务端为C#语言为例，介绍jQuery操作XML数据过程。

（1）功能描述

       在上一个例子的基础之上，向XML数据中增加一个学生ID，并在页面中增加一个“删除”链接。用户单击该链接时，获取传回的学生ID号，向服务端发送删除请求；服务端接收请求后，删除对应学生“ID”记录，修改XML数据，并将删除成功的标志返回前端页面；页面接收标志后，重新分组获取对应年级的学生数据，实现删除功能。

（2）实现代码

主体代码：

<script src="JScript/jquery-1.8.2.min.js" type="text/javascript"></script>

<style type="text/css">
    body{font-size:13px}
    h3{padding:0px;margin:8px 0px}
    .iframe{width:260px;border:solid 1px #666}
    .iframe .title{padding:5px;background-color:#eee}
    .iframe .content{padding:8px;font-size:12px}
    .btn {border:#666 1px solid;padding:2px;width:80px;
    filter:progid:DXImageTransform.Microsoft
    .Gradient(GradientType=0,StartColorStr=#ffffff,
    EndColorStr=#ECC9D8);}
    #Tip a{flaot:right}
</style>

<script type="text/javascript">
    var arrGrade = new Array(980886,980666);
    //自定义根据ID号删除记录函数
    function link_Delete(i) {
        var btnYN = confirm("您真的需要删除吗？");
        if (btnYN){
            $.post("7-7.ashx?Id=" + i,function(data) {
                if(data){    //重新执行单击获取数据按钮事件
                    $("#Button1").click();
                }else{
                    alert(data);
                }
            });
        }
    }
    $(function(){
        $("#Button1").click(function(){  //按钮事件
            var strHTML = "";    //初始化保存内容变量
            $.ajax({
                url:'Xml/7-7.xml?',
                dataType:'xml',
                success:function(data){
                    $.each(arrGrade,function(i){
                        var $strUser = $(data).find("User[grade=" + arrGrade[i] + "]");
                        strHTML += "<h3>年级：" + arrGrade[i] + "</h3>";
                        $strHTML.each(function(){
                         var $strId = $(this).children("id").text();
                         strHTML += "编号：" + $strId + "<a href='javascript:'
                         onclick='lnk_Detele(" + $strId + ")'>删除</a><br>";
                         strHTML += "姓名：" + $(this).children("name").text() + "<br>";
                         strHTML += "性别：" + $(this).children("sex").text() + "<br>";
                         strHTML += "邮箱：" + $(this).children("email").text() + "<br>";
                    });
                  });
                 //显示处理后的数据
                 $("#Tip").html(strHTML);
                }
            });
        });
    });
</script>

<div class="iframe">
    <div class="title">
        <input id="Button1" type="button" class="btn" value="获取数据" />
    </div>
    <div class="content">
        <div id="Tip"></div>
    </div>
</div>

XML文件代码：

<?xml version="1.0" encoding="utf-8" ?>
<Info>
    <User grade="980886">
        <name>tgr</name>
        <sex>男</sex>
        <email>tao_guo_rong@163.com</email>
    </User>
    <User grade="980886">
        <name>ljz</name>
        <sex>女</sex>
        <email>xiaoli@163.com</email>
    </User>
    <User grade="980666">
        <name>zth</name>
        <sex>男</sex>
        <email>tianhu@163.com</email>
    </User>
    <User grade="980666">
        <name>zxy</name>
        <sex>女</sex>
        <email>xiaoyan@163.com</email>
    </User>
</Info>

7-7.ashx的服务器：

<%@ WebHandler Language="C#" Class="_7_7" %>
using System;
using System.Web;
using System.Xml;
public class_7_7 : IHttpHandler{
    public void ProcessRequest(HttpContext Context) {
       context.Response.ContentType = "text/plain";
       string strId = CONTEXT.Request.QueryString["Id"].ToString();
       int intStatus = 0;
       XmlDocument xmlDoC = NEW XmlDocument();
       try{
           xmlDoc.Load(context.Sever.MapPath("Xml/7-7.xml")); //查找
           XmlNodeList xmlNodeList = xmlDoc.SelectNode("Info/User[id='" + strId + "']");
           XmlNode xmlNode = xmlNodeList.Item(0);
           xmlNode.ParentNode.RemoveChild(xmlNode);
           xmlDoc.Save(context.Sever.MapPath("Xml/7_7.xml"));
           intStatus = 1;
        }
        catch (Exception) {
            throw;
        }
        content.Response.Write(intStatus);
    }
    public bool IsRusable {
        get{
            return false;
        }
    }
}

(3)代码分析

        在本实例中，为了实现修改XML数据的功能，在代码中增加了一个自定义的函数lnk_Delete(i)。在该函数中，i为表示学生编号的形参，调用该函数$.post()将传来的学生编号发送到服务端，服务端接受该编号，在XML文件中查询该编号，并将查询到的节点移除；最后，再次在服务端中保存该XML文件，同时向页面发送删除成功的标志，页面接收该标志后，以“$("#Button1").click()”形式重新加载一次XML数据，显示删除成功后的页面效果。