在上篇中，我們詳細講解了如何實現列表管理的新增和刪除操作，可以看出，前端頁面通過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實現分類列表管理的全部內容，希望對大家的學習有所幫助。
新聞熱點
疑難解答
