AJAX非同步更改資料庫

前段時間做了一個小網站，裡面有個小功能感覺挺好的，在此與大家分享一下，還請各位大神不要笑話小弟的無知。

此功能大概是這個樣子的：點擊中的類別名稱，就可以對類別進行修改。

點擊類別名稱以後，原來的表格變成一個可編輯的文字框，並全選裡面的內容，此時可直接進行修改。斷行符號或者滑鼠點擊其他地方,提交修改內容.

如果不做修改點擊別處或者按“Esc”或斷行符號鍵，就會回到之前的樣子，如果修改後跟其他類名重複就會有相應的提示：

如果類名沒問題就會將修改後的內容顯示到頁面，同時會修改資料庫的值。

 

資料庫修改前              資料庫修改後

 

用到的js代碼

 

 

/**********************************************建立人：劉水鏡說明：    可編輯的表格**********************************************/$(function () {    // 相當於在頁面中的body標籤加上onload事件    $(".caname").click(function () {   // 給頁面中有caname類的標籤加上click函數        var objTD = $(this);        var oldText = $.trim(objTD.text());  // 儲存老的類別名稱        var input = $("<input type='text' value='" + oldText + "' />"); // 文字框的HTML代碼        objTD.html(input);   // 當前td的內容變為文字框        // 設定文字框的點擊事件失效        input.click(function () {            return false;        });        // 設定文字框的樣式        input.css("border-width", "0px");  //邊框為0        input.height(objTD.height());   //文字框的高度為當前td儲存格的高度        input.width(objTD.width());    // 寬度為當前td儲存格的寬度        input.css("font-size", "16px");    // 文字框的內容文字大小為16px        input.css("text-align", "center");   // 文本置中        input.trigger("focus").trigger("select");   // 全選        // 文字框失去焦點時重新變為文本        input.blur(function () {            var newText = $(this).val(); // 修改後的名稱            var input_blur = $(this);            // 當老的類別名稱與修改後的名稱不同的時候才進行資料的提交操作            if (oldText != newText) {                // 擷取該類別名所對應的ID(序號)                var caid = $.trim(objTD.prev().text());                // AJAX非同步更改資料庫                var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();                $.get(url, function (data) {                    if (data == "false") {                        alert("類別修改失敗,請檢查是否類別名稱重複!");                        input_blur.trigger("focus").trigger("select");   // 文字框全選                    } else {                        $("#test").text("");                        objTD.html(newText);                    }                });            } else {                // 前後文本一致,把文字框變成標籤                objTD.html(newText);            }        });        // 在文字框中按下鍵盤某鍵        input.keydown(function (event) {            var jianzhi = event.keyCode;            var input_keydown = $(this);            switch (jianzhi) {                case 13: // 按下斷行符號鍵 ,把修改後的值提交到資料庫                    // $("#test").text("您按下的索引值是: " + jianzhi);                    var newText = input_keydown.val(); // 修改後的名稱                    // 當老的類別名稱與修改後的名稱不同的時候才進行資料的提交操作                    if (oldText != newText) {                        // 擷取該類別名所對應的ID(序號)                        var caid = $.trim(objTD.prev().text());                        // AJAX非同步更改資料庫                        var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime();                        $.get(url, function (data) {                            if (data == "false") {                                                               alert("類別修改失敗,請檢查是否類別名稱重複!");                                input_keydown.trigger("focus").trigger("select");   // 文字框全選                            } else {                                $("#test").text("");                                objTD.html(newText);                            }                        });                    } else {                        // 前後文本一致,把文字框變成標籤                        objTD.html(newText);                    }                    break;                case 27: // 按下Esc鍵, 取消修改,把文字框變成標籤                    $("#test").text("");                    objTD.html(oldText);                    break;            }        });    });});// 屏蔽Enter按鍵$(document).keydown(function (event) {    switch (event.keyCode) {        case 13: return false;    }}); 

 

 

 

　

一般處理常式代碼

 

using System;using System.Collections.Generic;using System.Linq;using System.Web;using Model;using BLL;namespace Web.handler{    /// <summary>    /// ChangeCaName 的摘要說明    /// </summary>    public class ChangeCaName : IHttpHandler    {        public void ProcessRequest(HttpContext context)        {            context.Response.ContentType = "text/plain";            string caid = context.Request.QueryString["caid"];            string caname =context.Server.UrlDecode (context.Request.QueryString["caname"]);            Category ca = new Category(caid, caname);                        //判斷是否已有該類別名            CategoryManger camgr = new CategoryManger();            if (camgr.IsExist(caname))            {                //存在                context.Response.Write("false");                return;            }            //更改資料庫類別名            bool b=camgr.Update( ca);            if (b)            {                context.Response.Write("true");            }            else            {                context.Response.Write("false");            }        }        public bool IsReusable        {            get            {                return false;            }        }    }}

 

　　

功能很簡單，但用起來卻非常的方便，個人覺得很好，請各位大神不要笑話在下的才疏學淺。

另外實現此效果需要用到JQuery的函數，在此附上JQuery的下載，有需要的朋友拿去。

jQuery源檔案