用jQuery中的Ajax方法，进行无刷新修改类别(可以是任何数据)的办法

以下为王翔经验总结，转载请注明本博客地址，谢谢！
完整的操作流程：
1：点击类别名称，赋给一个onclick事件。
2：文字内容变成一个输入框，并且类别名称显示在输入框中。
3：修改输入框的内容。
4：点击页面其他地方时，输入框重新变回为文字，并且将用新输入的类别名取代之前的旧类别名。
5：并将新的类别名更新到数据库，完成整个过程。

aspx的页面代码如下，注意类别名要加一个class="canme"，才方便用jquery来获取：

< tr >
     < td  height ="25"  align ="center" > <% #  Eval ( " id " )  %> </ td >
     < td  height ="25"  align ="center"  class ="caname" > <% #  Eval ( " name " )  %> </ td >
< tr >

首先，在Web层新建一个js文件，拷贝如下代码：

Code
/**//*
 * 说明：用Jquery的方法，无刷新页面，编辑表格
 */

$(function() {
    //给页面中有caname类的标签上加上click函数
    $(".caname").click(function() {

        var objTD = $(this);

        //先将老的类别名称保存起来,并用trim方法去掉左右多余的空格
        var oldText = $.trim(objTD.text());

        //构造一个input的标签对象（作用是为了让这个input失效，不然点击多次后，文字会消失）
        var input = $("<input type='text' value='" + oldText + "' />");

        //当前td的内容变为文本框，并且把老类别名放进去
        objTD.html(input);

        //设置文本框的点击事件失效
        input.click(function() {
            return false;
        });

        //设置文本框样式，让界面显示的人性化点
        input.css("font-size", "16px");
        input.css("text-align", "center");
        input.css("background-color", "#F7F2DE");
        input.width("120px");

        //自动选中文本框中的文字
        input.select();

        //文本框失去焦点时重新变为文本
        input.blur(function() {

            //获得新输入的类别名
            var newText = $(this).val();

            //当老类别名与修改后的类别名不同时才进行数据提交操作
            if (oldText != newText) {

                //获取该类别名所对应的ID(caId)
                var caId = objTD.prev().text();

                //将新的类别名进行转码，不然界面以及数据库显示的都是"???"这样的乱码
                newText2 = escape(newText);

                //获取要传到"一般处理文件"(ChangeCaName.ashx)中的URL
                var url = "../handler/ChangeCaName.ashx?caid=" + caId + "&caname=" + newText2;

                //AJAX异步更改数据库,data为成功后的回调返回值，用于判断结果提示
                $.get(url, function(data) {
                    if (data == "false") {
                        //alert("类别修改失败，重复的类别名！");
                        $("#div_id_msg").text("类别修改失败，重复的类别名！");
                    }
                    else {
                        //用新的类别名文字替换之前变过来的输入框状态
                        objTD.html(newText);
                        $("#div_id_msg").text("");
                        alert("类别修改成功！");
                    }
                });
            } else {
                //新旧类别名都一样时，
                objTD.html(newText);
            }
        });

    });
});

然后在Web层下新建一个文件夹(handler)，在其下新建一个“一般处理程序”,也就是后缀为ashx的文件，拷贝以下代码：

Code
<%@ WebHandler Language="C#" Class="ChangeCaName" %>

using System;
using System.Web;
using BLL;
using Model;

public class ChangeCaName : IHttpHandler {

    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";

        //从js传来的URL中获取值
        string caname = context.Request.QueryString["caname"];
        string caId = context.Request.QueryString["caid"];

        //判断是据库中是否已存在同名类别
        if (!CategoryManager.IsExists(caname))
        {
            //更改数据库的类别名
            Category ca = new Category(caId, caname);
            if (CategoryManager.Edit(ca))
            {
                context.Response.Write("类别修改成功！");
            }
            else
            {
                context.Response.Write("类别修改失败！");
            }
        }
        else
        {
            context.Response.Write("类别名已存在！");
            return;
        }        
        
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

ok了，就是这些，试试看。