在上(shàng)篇中，我們詳細講解了如何實現列表管理(lǐ)的新增和(hé)删除操作(zuò)，可(kě)以看出，前端頁面通(tōng)過ajax與後台通(tōng)信，根據後台處理(lǐ)結果響應前端頁面交互操作(zuò)，這是一個(gè)很(hěn)典型的Ajax和(hé)JSON應用的例子。

本文将繼續上(shàng)篇文中的示例，完成編輯操作(zuò)。

編輯項操作(zuò)

用戶通(tōng)過單擊“編輯”按鈕，相應的項會(huì)立即變為(wèi)編輯狀态，出現一個(gè)輸入框，用戶可(kě)以重新輸入新的內(nèi)容，然後點擊“保存”按鈕完成編輯操作(zuò)，也可(kě)以單擊“取消”按鈕取消編輯狀态。

首先，通(tōng)過單擊“編輯”按鈕，實現編輯狀态，在global.js的$(function(){...})中加入如下代碼：

//編輯選項
$(".edit").live('click',function(){
	$(this).removeClass('edit').addClass('oks').attr('title','保存');
	$(this).prev().removeClass('del').addClass('cancer').attr('title','取消');
	var str = $(this).parent().text();
	var input = "";
	$(this).next().wrapInner(input);
});

從代碼中可(kě)以看出，其實是改變了“編輯”按鈕和(hé)“删除”按鈕的class樣式，修改了其title屬性，然後将分類名稱用一個(gè)input輸入框包裹(wrapInner)，這樣就生(shēng)成了一個(gè)編輯狀态。

要将修改好的內(nèi)容提交給後台處理(lǐ)，通(tōng)過單擊“保存”按鈕，會(huì)發生(shēng)下面的事情，請(qǐng)看代碼：

//編輯處理(lǐ)
$(".oks").live('click',function(){
	var input_str = $(this).parent().find('input').val();
    if(input_str==""){
		jNotify("請(qǐng)輸入類别名稱!");
		return false;
	}
	var str = escape(input_str);
	var id = $(this).parent().attr("rel");
	var URL = "post.php?action=edit";
		
	var btn = $(this);
	$.ajax({
            type: "POST",
            url: URL,
			data: "title="+str+"&id="+id,
			success: function(msg){
				if(msg==1){
				    jSuccess("編輯成功!");
					var strs = ""+input_str+";
					btn.parent().html(strs);
				}else{
					jNotify("操作(zuò)失敗!");
					return false;
				}
           }
	});
});

通(tōng)過單擊編輯狀态下的“保存”按鈕，首先獲取輸入框的內(nèi)容，如果沒有(yǒu)輸入任何內(nèi)容則提示用戶輸入內(nèi)容，然後将用戶輸入的內(nèi)容進行(xíng)escape編碼，同時(shí)還(hái)要獲取編輯項對應的ID，将輸入的內(nèi)容和(hé)ID作(zuò)為(wèi)參數(shù)通(tōng)過$.ajax提交給後台post.php處理(lǐ)，并響應後台返回的信息，如果返回成功，則提示用戶“編輯成功”，并且解除編輯狀态，如果返回失敗，則提示用戶“操作(zuò)失敗”。

後台post.php處理(lǐ)編輯項操作(zuò)與上(shàng)篇的新增項操作(zuò)差不多(duō)，代碼如下：

case 'edit':  //編輯項
	$id = $_POST['id'];
	$title = uniDecode($_POST['title'],'utf-8');
	$title = htmlspecialchars($title,ENT_QUOTES);
	$query = mysql_query("update catalist set title='$title' where cid='$id'");
    if($query){
		echo '1';
	}else{
		echo '2';
	}
	break;

以上(shàng)代碼片段加在post.php的switch語句中，代碼接收了前端傳來(lái)的id和(hé)title參數(shù)，并對title參數(shù)進行(xíng)解碼，然後更新數(shù)據表中對應的項，并輸出執行(xíng)結果給前台處理(lǐ)。

要取消編輯狀态，則通(tōng)過單擊“取消”執行(xíng)以下代碼：

//取消編輯
$(".cancer").live('click',function(){
	var li = $(this).parent().html();
	var str_1 = $(this).parent().find('input').val();
	var strs = " "+str_1+"";
	$(this).parent().html(strs);
});

其實，代碼重新組裝了一個(gè)字符串，重新将組裝的字符串替代了編輯狀态，即取消了編輯狀态。

總結

通(tōng)過這樣一個(gè)實際應用的案例，我們可(kě)以體(tǐ)驗前端技(jì)術(shù)的優越性，用戶完成的每一步操作(zuò)是那(nà)麽的友(yǒu)好，這是用戶體(tǐ)驗的一個(gè)方面。Jquery庫讓ajax操作(zuò)變得(de)如此簡單，文中代碼中還(hái)用到了jquery的live方法，這是為(wèi)了綁定動态創建DOM元素所必需的。此外，文中沒有(yǒu)提到驗證輸入類表的重複性，這個(gè)是需要後台驗證的，讀者朋友(yǒu)們可(kě)以自行(xíng)寫一段驗證代碼。最後，順便提一下，如果本例再加上(shàng)一個(gè)拖動排序的功能，是不是會(huì)更完美呢？關于拖動排序的實現，helloweba.com也有(yǒu)相關實例講解，各位讀者朋友(yǒu)可(kě)以先熟知。我會(huì)随後奉上(shàng)這份美餐的，敬請(qǐng)關注。