jquery實作點擊文字可編輯並修改儲存至資料庫_jquery

這個方法網路上可以查到很多，但是好多只有點擊文字編輯並保持，但是沒有完整的程式碼寫怎麼儲存到資料庫。因為本人才疏學淺，費啦好長時間才寫好把修改的內容只用一條sql語句保存到數據庫，今天在這裡和大家分享

這是運行圖片
 
這是前台頁03.aspx頁面

複製程式碼 程式碼如下:

訂單名稱：
產品類型:		狀態: td>		印量:
收貨資訊:
總金額:

這是js 03.js

複製程式碼

複製程式碼

複製程式碼



複製程式碼



複製程式碼



複製碼


程式碼如下:


$(function () {
//取得class為caname的元素
$(".caname").click(function ( ) {
var td = $(this);
var txt = $.trim(td.text());
var input = $("");
td.html(input);
input.click(function () { return false; });
//取得焦點
input.trigger(" focus");
//文字方塊失去焦點後提交內容，重新變成文字
input.blur(function () {
var newtxt = $(this).val();
//判斷文字有沒有修改
if (newtxt != txt) {
td.html(newtxt);

//不需要使用資料庫的這段可以不需要

//var Order_Id = $("#ID_Order").text();

var updateCol = $.trim(td.prev().attr("id"));//我重點要說的是著一句：td.prev();表示本td的上一個td。這句程式碼的意思是你所點擊的td的上一個td的id（如果你不懂可以看前面的03.aspx頁面）。
//ajax非同步更改資料庫,加參數date是解決快取問題

url = "../test/03.ashx?caname=" newtxt "&updateCol=" updateCol "&date=" new Date(); //使用get()方法開啟一個一般處理程序，data接受傳回的參數（在一般處理程序中傳回參數的方法context.Response.Write("要傳回的參數");） //資料庫的修改就在一般處理程序中完成

$.get(url, function (data) {

// if (data == "1" ) {
// alert("此類別已存在！");
// td.html(txt);
// return;

// } // alert( data); alert("修改成功"); td.html(newtxt); }); 複製程式碼 程式碼如下:

這是一般處理程序頁 03.ashx

p>

複製程式碼 程式碼如下:

using System;🎜>

using System;🎜>using System. Web;
using System.Data.SqlClient;

public class _03 : IHttpHandler {

public void ProcessRequest (HttpContext context) {
context.Response. /plain";
int OrderId = 5;

string newOrderName = context.Request.QueryString["caname"];//取得使用者修改後的文字
string updateCol = context.Request .QueryString["updateCol"];//取得使用者修改的本td的上一個td的id的值（這個id與資料庫中的列名相同）
string sql = "update eoPrintOrder set " updateCol " =@name where Id_order=@id" ;//透過這一sql語句，就可以對資料庫進行修改SqlParameter[] pams = {
new SqlParameter("@name",newOrderName),
new SqlParameter("@id", OrderId)
};


string data = DscySFL.DbHelp.ExecuteCommand(sql,pams ).ToString();
context.Response.Write(data);

}

public bool IsReusable {
get {
return false;
}
}

}