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文件，拷贝如下代码：

/**//* 
* 说明：用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(); 

//用新的类别名文字替换之前变过来的输入框状态 
objTD.html(newText); 

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

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

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

//AJAX异步更改数据库,data为成功后的回调返回值，用于显示提示信息 
$.get(url, function(data) { alert(data) }); 

}); 
}); 
}); 

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

<%@ 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; 
} 
} 

}