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

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

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

在實際應(yīng)用中，我們要管理一個客戶分類，實現(xiàn)對客戶分類的增加、刪除和修改等操作，如何讓這些操作變得更人性化，讓用戶操作起來更加方便成了我們必須研究的課題。

準(zhǔn)備階段
您需要具備HTML和Jquery等前端知識，以及基本的PHP程序和MySql數(shù)據(jù)庫相關(guān)知識。要實現(xiàn)本文中的DEMO示例，首先需要一個mysql數(shù)據(jù)庫：

CREATE TABLE `catalist` ( 
 `cid` int(11) NOT NULL auto_increment, 
 `title` varchar(100) NOT NULL, 
 `sort` mediumint(6) NOT NULL default '0', 
 PRIMARY KEY (`cid`) 
) ENGINE=MyISAM DEFAULT CHARSET=utf8;

其次在頁面中引入jquery庫，以及操作結(jié)果提示插件jNotify和刪除確認(rèn)插件hiAlert。后者兩個插件在本站都有詳細(xì)的講解，讀者可以通過鏈接了解下：
將需要準(zhǔn)備的文件一并加入到index.php的<head>之間。

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/jNotify.jquery.js"></script> 
<script type="text/javascript" src="js/jquery.alert.js"></script> 
<script type="text/javascript" src="js/global.js"></script> 
<link rel="stylesheet" type="text/css" href="css/alert.css" />

準(zhǔn)備完畢我們進(jìn)入主題。
index.php
index.php是主體頁面，讀取了數(shù)據(jù)庫中的分類數(shù)據(jù)，以列表展示，并提供了增加、刪除和修改的功能按鈕。

<?php 
include_once('connect.php'); //連接數(shù)據(jù)庫 
$query = mysql_query("select * from catalist order by cid asc"); 
while($row=mysql_fetch_array($query)){ 
 $list .= "<li rel='".$row['cid']."'><span class='del' title='刪除'></span> 
 <span class='edit' title='編輯'></span><span class='txt'>".$row['title']."</span></li>"; 
} 
?>

以上代碼通過讀取數(shù)據(jù)表中的數(shù)據(jù)，返回一個列表字符串。然后我們要將字符串輸出到對應(yīng)的列表中，代碼如下：

<div class="selectlist"> 
 <h3>客戶類別</h3> 
 <ul id="catalist"> 
   <?php echo $list;?> 
 </ul> 
 <p><a href="javascript:;" onclick="addOpt()">新增一項</a></p> 
</div>

試著往數(shù)據(jù)表中添加幾條數(shù)據(jù)，可以看到一個分類列表。
CSS

.input{width:160px; padding:2px; border:1px solid #d3d3d3} 
.cur_tr{background:#ffc} 
.selectlist{width:280px; margin:30px auto; border:1px solid #ccc;} 
.selectlist h3{height:32px; line-height:32px; padding:0 4px; border-bottom:1px dotted #d3d3d3; 
 background:#f7f7f7} 
.selectlist h3 span{float:right; font-weight:500} 
.selectlist ul{margin-top:4px; margin-left:20px; list-style-type: disc} 
.selectlist ul li{line-height:26px} 
.selectlist p{line-height:28px; padding-left:6px} 
.selectlist ul li span{width:20px; height:20px} 
.selectlist ul li span.edit{ float:right;background:url(images/edits.gif) no-repeat 0 5px; 
cursor:pointer} 
.selectlist ul li span.del,.selectlist ul li span.dels,.selectlist ul li span.cancer{ 
 float:right;background:url(images/del.gif) no-repeat 0 5px; cursor:pointer} 
.selectlist ul li span.ok,.selectlist ul li span.oks{float:right;background:url(images/ok.gif) 
no-repeat 0 5px; cursor:pointer}

CSS我就不詳細(xì)講解，看下就明白了，最終顯示的效果如圖：

新增項操作
在global.js加入addOpt()函數(shù):

function addOpt(){ 
 var str = "<li><span class='dels' title='取消'></span><span class='ok' title='保存'></span> 
 <input type='text' class='input' /></li>"; 
 $("#catalist").append(str); 
}

通過單擊“新增一項”鏈接，向DOM中添加了一個新增項的輸入框。
當(dāng)用戶輸入內(nèi)容后，點擊“保存”，將會觸發(fā)一個ajax操作，先看代碼：

$(function(){ 
 //保存新增項 
 $(".ok").live('click',function(){ 
  var btn = $(this); 
  var input_str = btn.parent().find('input').val(); 
  if(input_str==""){ 
   jNotify("請輸入類別!"); 
   return false; 
  } 
  var str = escape(input_str); 
  $.getJSON("post.php?action=add&title="+str,function(json){ 
   if(json.success==1){ 
    var li = "<li rel='"+json.id+"'><span class='del' title='刪除'> 
    </span><span class='edit' title='編輯'></span><span class='txt'>"+ 
    json.title+"</span></li>"; 
    $("#catalist").append(li); 
    btn.parent().remove(); 
    jSuccess("恭喜，操作成功!"); 
   }else{ 
    jNotify("出錯了！"); 
    return false; 
   } 
  }); 
 }); 
});

首先獲取用戶輸入的內(nèi)容，如果沒有輸入任何內(nèi)容則提示用戶輸入內(nèi)容，然后將用戶輸入的內(nèi)容進(jìn)行escape編碼，保證中文字符能正確傳輸給后臺程序識別。然后通過$.getJSON方法向后臺post.php發(fā)起一個異步的Ajax請求。后臺post.php接收參數(shù)值并進(jìn)行相關(guān)處理，前端代碼通過響應(yīng)后臺返回的JSON數(shù)據(jù)，如果新增成功，則向列表后面追加一項，并提示用戶“操作成功”，如果失敗則提示用戶“出錯了”。
如果要取消新增項操作，只需當(dāng)單擊“取消”按鈕時執(zhí)行以下代碼：

//取消新增項 
$(".dels").live('click',function(){ 
  $(this).parent().remove(); //將新增項移除 
});

后臺post.php需要處理新增項內(nèi)容，代碼如下：

include_once('connect.php'); //連接數(shù)據(jù)庫 
$action = $_GET['action']; 
switch($action){ 
 case 'add': //新增項 
  $title = uniDecode($_GET['title'],'utf-8'); 
  $title = htmlspecialchars($title,ENT_QUOTES); 
  $query = mysql_query("insert into catalist (cid,title) values (NULL,'$title')"); 
  if($query){ 
   $insertid = mysql_insert_id($link); 
   $arr = array('id'=>$insertid,'title'=>$title,'success'=>1); 
  }else{ 
   $arr = array('success'=>2); 
  } 
  echo json_encode($arr); 
  break; 
  case '': 
  break; 
}

通過接收前端提交的內(nèi)容，進(jìn)行解碼后，寫入數(shù)據(jù)表中，并輸出JSON數(shù)據(jù)格式供前臺處理。關(guān)于uniDecode()函數(shù)，讀者可以下載源碼了解，主要是為了正確讀取解析jquery通過異步提交的中文字符串。
添加項操作已經(jīng)完成，下面請看刪除項操作。刪除項操作
回到global.js，在$(function(){})加入下面的代碼：

//刪除項 
 $(".del").live('click',function(){ 
  var btn = $(this); 
  var id = btn.parent().attr('rel'); 
  var URL = "post.php?action=del"; 
  hiConfirm('您確定要刪除嗎？', '提示',function(r){ 
   if(r){ 
    $.ajax({ 
    type: "POST", 
    url: URL, 
    data: "id="+id, 
    success: function(msg){ 
     if(msg==1){ 
      jSuccess("刪除成功!"); 
      btn.parent().remove(); 
     }else{ 
      jNotify("操作失敗!"); 
      return false; 
     } 
    } 
    }); 
   } 
  }); 
 });

顯然，通過單擊“刪除”按鈕，同樣是向后臺post.php發(fā)送一個ajax請求，將刪除項對應(yīng)的參數(shù)ID發(fā)送給后臺并響應(yīng)后臺處理結(jié)果，如果成功，則提示用戶“刪除成功”，并通過remove()將數(shù)據(jù)項移除，如果失敗，則提示“操作失敗”。
后臺post.php接收參數(shù)并作出相應(yīng)的處理：

case 'del': //刪除項 
 $id = $_POST['id']; 
 $query = mysql_query("delete from catalist where cid=".$id); 
 if($query){ 
  echo '1'; 
 }else{ 
  echo '2'; 
 } 
 break;

以上這段代碼片段，加在post.php的switch語句中，執(zhí)行了刪除語句，并輸出執(zhí)行結(jié)果供前端處理。
限于篇幅，修改項操作在下此文章中再進(jìn)行講解，敬請關(guān)注，不要錯過嘍。

您可能感興趣的文章: