快捷導(dǎo)航

Jquery+Ajax+PHP+MySQL實現(xiàn)分類列表管理(下)

更新時間：2015年10月28日 16:40:36 投稿：lijiao

本文將采用Jquery+Ajax+PHP+MySQL來實現(xiàn)一個客戶分類列表的管理，如何利用Ajax和Json技術(shù)讓用戶操作起來覺得更輕松，感興趣的小伙伴們可以參考一下

在上篇中，我們詳細(xì)講解了如何實現(xiàn)列表管理的新增和刪除操作，可以看出，前端頁面通過ajax與后臺通信，根據(jù)后臺處理結(jié)果響應(yīng)前端頁面交互操作，這是一個很典型的Ajax和JSON應(yīng)用的例子。
本文將繼續(xù)上篇文中的示例，完成編輯操作。
編輯項操作
用戶通過單擊“編輯”按鈕，相應(yīng)的項會立即變?yōu)榫庉嫚顟B(tài)，出現(xiàn)一個輸入框，用戶可以重新輸入新的內(nèi)容，然后點擊“保存”按鈕完成編輯操作，也可以單擊“取消”按鈕取消編輯狀態(tài)。
首先，通過單擊“編輯”按鈕，實現(xiàn)編輯狀態(tài)，在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)，這樣就生成了一個編輯狀態(tài)。
要將修改好的內(nèi)容提交給后臺處理，通過單擊“保存”按鈕，會發(fā)生下面的事情，請看代碼：

//編輯處理 
$(".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; 
        } 
      } 
  }); 
});

通過單擊編輯狀態(tài)下的“保存”按鈕，首先獲取輸入框的內(nèi)容，如果沒有輸入任何內(nèi)容則提示用戶輸入內(nèi)容，然后將用戶輸入的內(nèi)容進(jìn)行escape編碼，同時還要獲取編輯項對應(yīng)的ID，將輸入的內(nèi)容和ID作為參數(shù)通過$.ajax提交給后臺post.php處理，并響應(yīng)后臺返回的信息，如果返回成功，則提示用戶“編輯成功”，并且解除編輯狀態(tài)，如果返回失敗，則提示用戶“操作失敗”。
后臺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參數(shù)，并對title參數(shù)進(jìn)行解碼，然后更新數(shù)據(jù)表中對應(yīng)的項，并輸出執(zhí)行結(jié)果給前臺處理。
要取消編輯狀態(tài)，則通過單擊“取消”執(zhí)行以下代碼：

//取消編輯 
$(".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); 
});

其實，代碼重新組裝了一個字符串，重新將組裝的字符串替代了編輯狀態(tài)，即取消了編輯狀態(tài)。
通過這樣一個實際應(yīng)用的案例，我們可以體驗前端技術(shù)的優(yōu)越性，用戶完成的每一步操作是那么的友好，這是用戶體驗的一個方面。Jquery庫讓ajax操作變得如此簡單，文中代碼中還用到了jquery的live方法，這是為了綁定動態(tài)創(chuàng)建DOM元素所必需的。

上面兩篇就是小編為大家整理的關(guān)于Jquery+Ajax+PHP+MySQL實現(xiàn)分類列表管理的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助。

您可能感興趣的文章: