採用Jquery+Ajax+PHP+MySQL實現分類列表管理 上
在實際應用中，我們要管理一個客戶分類，實現對客戶分類的增加、刪除和修改等操作，如何讓這些操作變得更人性化，讓用戶操作起來更加方便成了我們必須研究的課題。
查看演示下載源碼
本文將採用Jquery+Ajax+PHP+MySQL來實現一個客戶分類列表的管理，如何利用Ajax和Json技術讓用戶操作起來覺得更輕鬆，且看本文一一講解。
準備階段
您需要具備HTML和Jquery等前端知識，以及基本的PHP程序和MySql資料庫相關知識。要實現本文中的DEMO示例，首先需要一個mysql資料庫：
CREATETABLE`catalist`(`cid`int(11)NOTNULLauto_increment,`title`varchar(100)NOTNULL,`sort`mediumint(6)NOTNULLdefault"0",PRIMARYKEY(`cid`))ENGINE=MyISAMDEFAULTCHARSET=utf8;
其次在頁面中引入jquery庫，以及操作結果提示插件jNotify和刪除確認插件hiAlert。後者兩個插件在本站都有詳細的講解，讀者可以通過鏈接了解下：jNotify：操作結果信息提示條hiAlert：美化的網頁對話框
將需要準備的文件一併加入到index.php的<head>之間。
<scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript"src="js/jNotify.jquery.js"></script><scripttype="text/javascript"src="js/jquery.alert.js"></script><scripttype="text/javascript"src="js/global.js"></script><linkrel="stylesheet"type="text/css"href="css/alert.css"/>
準備完畢我們進入主題。
index.php
index.php是主體頁面，讀取了資料庫中的分類數據，以列表展示，並提供了增加、刪除和修改的功能按鈕。
<?phpinclude_once("connect.php");//連接資料庫$query=mysql_query("select*fromcatalistorderbycidasc");while($row=mysql_fetch_array($query)){$list.="<lirel="".$row["cid"].""><spanclass="del"title="刪除"></span><spanclass="edit"title="編輯"></span><spanclass="txt">".$row["title"]."</span></li>";}?>
以上代碼通過讀取數據表中的數據，返回一個列表字元串。然後我們要將字元串輸出到對應的列表中，代碼如下：
<divclass="selectlist"><h3>客戶類別</h3><ulid="catalist"><?phpecho$list;?></ul><p><ahref="javascript:;"onclick="addOpt()">新增一項</a></p></div>
試著往數據表中添加幾條數據，可以看到一個分類列表。
CSS
.input{width:160px;padding:2px;border:1pxsolid#d3d3d3}.cur_tr{background:#ffc}.selectlist{width:280px;margin:30pxauto;border:1pxsolid#ccc;}.selectlisth3{height:32px;line-height:32px;padding:04px;border-bottom:1pxdotted#d3d3d3;background:#f7f7f7}.selectlisth3span{float:right;font-weight:500}.selectlistul{margin-top:4px;margin-left:20px;list-style-type:disc}.selectlistulli{line-height:26px}.selectlistp{line-height:28px;padding-left:6px}.selectlistullispan{width:20px;height:20px}.selectlistullispan.edit{float:right;background:url(images/edits.gif)no-repeat05px;cursor:pointer}.selectlistullispan.del,.selectlistullispan.dels,.selectlistullispan.cancer{float:right;background:url(images/del.gif)no-repeat05px;cursor:pointer}.selectlistullispan.ok,.selectlistullispan.oks{float:right;background:url(images/ok.gif)no-repeat05px;cursor:pointer}
CSS我就不詳細講解，看下就明白了，最終顯示的效果如圖：
新增項操作
在global.js加入addOpt()函數:
functionaddOpt(){varstr="<li><spanclass="dels"title="取消"></span><spanclass="ok"title="保存"></span><inputtype="text"class="input"/></li>";$("#catalist").append(str);}
通過單擊「新增一項」鏈接，向DOM中添加了一個新增項的輸入框。
當用戶輸入內容後，點擊「保存」，將會觸發一個ajax操作，先看代碼：
$(function(){//保存新增項$(".ok").live("click",function(){varbtn=$(this);varinput_str=btn.parent().find("input").val();if(input_str==""){jNotify("請輸入類別!");returnfalse;}varstr=escape(input_str);$.getJSON("post.php?action=add&title="+str,function(json){if(json.success==1){varli="<lirel=""+json.id+""><spanclass="del"title="刪除"></span><spanclass="edit"title="編輯"></span><spanclass="txt">"+json.title+"</span></li>";$("#catalist").append(li);btn.parent().remove();jSuccess("恭喜，操作成功!");}else{jNotify("出錯了！");returnfalse;}});});});
首先獲取用戶輸入的內容，如果沒有輸入任何內容則提示用戶輸入內容，然後將用戶輸入的內容進行escape編碼，保證中文字元能正確傳輸給後台程序識別。然後通過$.getJSON方法向後台post.php發起一個非同步的Ajax請求。後台post.php接收參數值並進行相關處理，前端代碼通過響應後台返回的JSON數據，如果新增成功，則向列表後面追加一項，並提示用戶「操作成功」，如果失敗則提示用戶「出錯了」。
如果要取消新增項操作，只需當單擊「取消」按鈕時執行以下代碼：
//取消新增項$(".dels").live("click",function(){$(this).parent().remove();//將新增項移除});
後台post.php需要處理新增項內容，代碼如下：
include_once("connect.php");//連接資料庫$action=$_GET["action"];switch($action){case"add"://新增項$title=uniDecode($_GET["title"],"utf-8");$title=htmlspecialchars($title,ENT_QUOTES);$query=mysql_query("insertintocatalist(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);}echojson_encode($arr);break;case"":break;}
通過接收前端提交的內容，進行解碼後，寫入數據表中，並輸出JSON數據格式供前台處理。關於uniDecode()函數，讀者可以下載源碼了解，主要是為了正確讀取解析jquery通過非同步提交的中文字元串。
添加項操作已經完成，下面請看刪除項操作。
刪除項操作
回到global.js，在$(function(){})加入下面的代碼：
//刪除項$(".del").live("click",function(){varbtn=$(this);varid=btn.parent().attr("rel");varURL="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("操作失敗!");returnfalse;}}});}});});
顯然，通過單擊「刪除」按鈕，同樣是向後台post.php發送一個ajax請求，將刪除項對應的參數ID發送給後台並響應後台處理結果，如果成功，則提示用戶「刪除成功」，並通過remove()將數據項移除，如果失敗，則提示「操作失敗」。
後台post.php接收參數並作出相應的處理：
case"del"://刪除項$id=$_POST["id"];$query=mysql_query("deletefromcatalistwherecid=".$id);if($query){echo"1";}else{echo"2";}break;
以上這段代碼片段，加在post.php的switch語句中，執行了刪除語句，並輸出執行結果供前端處理。
限於篇幅，修改項操作在下一篇文中講解，敬請關注。
聲明：本文為原創文章，helloweba.com和作者擁有版權，如需轉載，請註明來源於helloweba.com並保留原文鏈接，否則視為侵權。
你的讚賞是我堅持原創的動力
讚賞共 0 人讚賞推薦閱讀：