Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類(lèi)列表管理(下)

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

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

在上篇中，我們?cè)敿?xì)講解了如何實(shí)現(xiàn)列表管理的新增和刪除操作，可以看出，前端頁(yè)面通過(guò)ajax與后臺(tái)通信，根據(jù)后臺(tái)處理結(jié)果響應(yīng)前端頁(yè)面交互操作，這是一個(gè)很典型的Ajax和JSON應(yīng)用的例子。
本文將繼續(xù)上篇文中的示例，完成編輯操作。
編輯項(xiàng)操作
用戶(hù)通過(guò)單擊“編輯”按鈕，相應(yīng)的項(xiàng)會(huì)立即變?yōu)榫庉嫚顟B(tài)，出現(xiàn)一個(gè)輸入框，用戶(hù)可以重新輸入新的內(nèi)容，然后點(diǎn)擊“保存”按鈕完成編輯操作，也可以單擊“取消”按鈕取消編輯狀態(tài)。
首先，通過(guò)單擊“編輯”按鈕，實(shí)現(xiàn)編輯狀態(tài)，在global.js的$(function(){...})中加入如下代碼：

//編輯選項(xiàng) 
$(".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); 
});

從代碼中可以看出，其實(shí)是改變了“編輯”按鈕和“刪除”按鈕的class樣式，修改了其title屬性，然后將分類(lèi)名稱(chēng)用一個(gè)input輸入框包裹(wrapInner)，這樣就生成了一個(gè)編輯狀態(tài)。
要將修改好的內(nèi)容提交給后臺(tái)處理，通過(guò)單擊“保存”按鈕，會(huì)發(fā)生下面的事情，請(qǐng)看代碼：

//編輯處理 
$(".oks").live('click',function(){ 
  var input_str = $(this).parent().find('input').val(); 
  if(input_str==""){ 
    jNotify("請(qǐng)輸入類(lèi)別名稱(chē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 = "<span class='del' title='刪除'></span><span class='edit' 
          title='編輯'></span><span class='txt'>"+input_str+"</span>; 
          btn.parent().html(strs); 
        }else{ 
          jNotify("操作失敗!"); 
          return false; 
        } 
      } 
  }); 
});

通過(guò)單擊編輯狀態(tài)下的“保存”按鈕，首先獲取輸入框的內(nèi)容，如果沒(méi)有輸入任何內(nèi)容則提示用戶(hù)輸入內(nèi)容，然后將用戶(hù)輸入的內(nèi)容進(jìn)行escape編碼，同時(shí)還要獲取編輯項(xiàng)對(duì)應(yīng)的ID，將輸入的內(nèi)容和ID作為參數(shù)通過(guò)$.ajax提交給后臺(tái)post.php處理，并響應(yīng)后臺(tái)返回的信息，如果返回成功，則提示用戶(hù)“編輯成功”，并且解除編輯狀態(tài)，如果返回失敗，則提示用戶(hù)“操作失敗”。
后臺(tái)post.php處理編輯項(xiàng)操作與上篇的新增項(xiàng)操作差不多，代碼如下：

case 'edit': //編輯項(xiàng) 
  $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語(yǔ)句中，代碼接收了前端傳來(lái)的id和title參數(shù)，并對(duì)title參數(shù)進(jìn)行解碼，然后更新數(shù)據(jù)表中對(duì)應(yīng)的項(xiàng)，并輸出執(zhí)行結(jié)果給前臺(tái)處理。
要取消編輯狀態(tài)，則通過(guò)單擊“取消”執(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); 
});

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

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

您可能感興趣的文章: