成人精品一区二区三区中文字幕-成人精品一区二区三区-成人精品一级毛片-成人精品亚洲-日本在线视频一区二区-日本在线视频免费

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