在上篇中，我們詳細講解瞭如何實現列表管理的新增和刪除操作，可以看出，前端頁面透過ajax與後台通信，根據後台處理結果響應前端頁面交互操作，這是一個很典型的Ajax和JSON應用的例子。
本文將繼續上篇的範例，完成編輯操作。
編輯項目操作
使用者透過點選「編輯」按鈕，對應的項目會立即變成編輯狀態，出現輸入框，使用者可以重新輸入新的內容，然後點選「儲存」按鈕完成編輯操作，也可以點選「取消」按鈕取消編輯狀態。
首先，透過點選「編輯」按鈕，實現編輯狀態，在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 = "<input type='text' class='input' value='"+str+"' />";
$(this).next().wrapInner(input);
});
從程式碼可以看出，其實是改變了「編輯」按鈕和「刪除」按鈕的class樣式，修改了其title屬性，然後將分類名稱用一個input輸入框包裹(wrapInner)，這樣就生成了一個編輯狀態。
要將修改好的內容提交給後台處理，透過點擊「儲存」按鈕，會發生下面的事情，請看程式碼：
//编辑处理
$(".oks").live('click',function(){
var input_str = $(this).parent().find('input').val();
if(input_str==""){
jNotify("请输入类别名称!");
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 = "<span class='del' title='删除'></span><span class='edit'
title='编辑'></span><span class='txt'>"+input_str+"</span>;
btn.parent().html(strs);
}else{
jNotify("操作失败!");
return false;
}
}
});
});
透過點擊編輯狀態下的「儲存」按鈕，先取得輸入框的內容，如果沒有輸入任何內容則提示使用者輸入內容，然後將使用者輸入的內容進行escape編碼，同時也要取得編輯項目對應的ID，將輸入的內容和ID作為參數通過$.ajax提交給後台post.php處理，並響應後台返回的信息，如果返回成功，則提示用戶“編輯成功”，並且解除編輯狀態，如果返回失敗，則提示使用者「操作失敗」。
後台post.php處理編輯項目操作與上篇的新增項目操作差不多，程式碼如下：
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;
以上程式碼片段加在post.php的switch語句中，程式碼接收了前端傳來的id和title參數，並對title參數進行解碼，然後更新資料表中對應的項，並輸出執行結果給前台處理。
若要取消編輯狀態，則透過按一下「取消」執行以下程式碼：
//取消编辑
$(".cancer").live('click',function(){
var li = $(this).parent().html();
var str_1 = $(this).parent().find('input').val();
var strs = "<span class='del' title='删除'></span><span class='edit' title='编辑'>
</span><span class='txt'>"+str_1+"</span>";
$(this).parent().html(strs);
});
其實，程式碼重新組裝了一個字串，重新將組裝的字串取代了編輯狀態，也就是取消了編輯狀態。
透過這樣一個實際應用的案例，我們可以體驗前端技術的優越性，用戶完成的每一步操作是那麼的友好，這是用戶體驗的一個方面。 Jquery函式庫讓ajax操作變得如此簡單，文中程式碼中也用到了jquery的live方法，這是為了綁定動態建立DOM元素所必需的。
上面兩篇就是小編為大家整理的關於Jquery Ajax PHP MySQL實現分類清單管理的全部內容，希望對大家的學習有所幫助。
