Jquery+Ajax+PHP+MySQL實(shí)現(xiàn)分類列表管理(上)
在實(shí)際應(yīng)用中，我們要管理一個(gè)客戶分類，實(shí)現(xiàn)對(duì)客戶分類的增加、刪除和修改等操作，如何讓這些操作變得更人性化，讓用戶操作起來更加方便成了我們必須研究的課題。
準(zhǔn)備階段
您需要具備HTML和Jquery等前端知識(shí)，以及基本的PHP程序和MySql數(shù)據(jù)庫(kù)相關(guān)知識(shí)。要實(shí)現(xiàn)本文中的DEMO示例，首先需要一個(gè)mysql數(shù)據(jù)庫(kù)：
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;
其次在頁(yè)面中引入jquery庫(kù)，以及操作結(jié)果提示插件jNotify和刪除確認(rèn)插件hiAlert。后者兩個(gè)插件在本站都有詳細(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是主體頁(yè)面，讀取了數(shù)據(jù)庫(kù)中的分類數(shù)據(jù)，以列表展示，并提供了增加、刪除和修改的功能按鈕。
<?php
include_once('connect.php'); //連接數(shù)據(jù)庫(kù)
$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ù)，返回一個(gè)列表字符串。然后我們要將字符串輸出到對(duì)應(yīng)的列表中，代碼如下：
<div class="selectlist"> <h3>客戶類別</h3> <ul id="catalist"> <?php echo $list;?> </ul> <p><a href="javascript:;" onclick="addOpt()">新增一項(xiàng)</a></p> </div>
試著往數(shù)據(jù)表中添加幾條數(shù)據(jù)，可以看到一個(gè)分類列表。
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ì)講解，看下就明白了，最終顯示的效果如圖：
新增項(xiàng)操作
在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);
}
通過單擊“新增一項(xiàng)”鏈接，向DOM中添加了一個(gè)新增項(xiàng)的輸入框。
當(dāng)用戶輸入內(nèi)容后，點(diǎn)擊“保存”，將會(huì)觸發(fā)一個(gè)ajax操作，先看代碼：
$(function(){
//保存新增項(xiàng)
$(".ok").live('click',function(){
var btn = $(this);
var input_str = btn.parent().find('input').val();
if(input_str==""){
jNotify("請(qǐng)輸入類別!");
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("出錯(cuò)了！");
return false;
}
});
});
});
首先獲取用戶輸入的內(nèi)容，如果沒有輸入任何內(nèi)容則提示用戶輸入內(nèi)容，然后將用戶輸入的內(nèi)容進(jìn)行escape編碼，保證中文字符能正確傳輸給后臺(tái)程序識(shí)別。然后通過$.getJSON方法向后臺(tái)post.php發(fā)起一個(gè)異步的Ajax請(qǐng)求。后臺(tái)post.php接收參數(shù)值并進(jìn)行相關(guān)處理，前端代碼通過響應(yīng)后臺(tái)返回的JSON數(shù)據(jù)，如果新增成功，則向列表后面追加一項(xiàng)，并提示用戶“操作成功”，如果失敗則提示用戶“出錯(cuò)了”。
如果要取消新增項(xiàng)操作，只需當(dāng)單擊“取消”按鈕時(shí)執(zhí)行以下代碼：
//取消新增項(xiàng)
$(".dels").live('click',function(){
$(this).parent().remove(); //將新增項(xiàng)移除
});
后臺(tái)post.php需要處理新增項(xiàng)內(nèi)容，代碼如下：
include_once('connect.php'); //連接數(shù)據(jù)庫(kù)
$action = $_GET['action'];
switch($action){
case 'add': //新增項(xiàng)
$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ù)格式供前臺(tái)處理。關(guān)于uniDecode()函數(shù)，讀者可以下載源碼了解，主要是為了正確讀取解析jquery通過異步提交的中文字符串。
添加項(xiàng)操作已經(jīng)完成，下面請(qǐng)看刪除項(xiàng)操作。刪除項(xiàng)操作
回到global.js，在$(function(){})加入下面的代碼：
//刪除項(xiàng)
$(".del").live('click',function(){
var btn = $(this);
var id = btn.parent().attr('rel');
var URL = "post.php?action=del";
hiConfirm('您確定要?jiǎng)h除嗎？', '提示',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;
}
}
});
}
});
});
顯然，通過單擊“刪除”按鈕，同樣是向后臺(tái)post.php發(fā)送一個(gè)ajax請(qǐng)求，將刪除項(xiàng)對(duì)應(yīng)的參數(shù)ID發(fā)送給后臺(tái)并響應(yīng)后臺(tái)處理結(jié)果，如果成功，則提示用戶“刪除成功”，并通過remove()將數(shù)據(jù)項(xiàng)移除，如果失敗，則提示“操作失敗”。
后臺(tái)post.php接收參數(shù)并作出相應(yīng)的處理：
case 'del': //刪除項(xiàng)
$id = $_POST['id'];
$query = mysql_query("delete from catalist where cid=".$id);
if($query){
echo '1';
}else{
echo '2';
}
break;
以上這段代碼片段，加在post.php的switch語(yǔ)句中，執(zhí)行了刪除語(yǔ)句，并輸出執(zhí)行結(jié)果供前端處理。
限于篇幅，修改項(xiàng)操作在下此文章中再進(jìn)行講解，敬請(qǐng)關(guān)注，不要錯(cuò)過嘍。
相關(guān)文章
jquery 日期控件datepicker屬性詳細(xì)解析
本文是對(duì)jquery中日期控件datepicker的屬性進(jìn)行了詳細(xì)的介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-11-11
jQuery實(shí)現(xiàn)的多級(jí)下拉菜單效果代碼
這篇文章主要介紹了jQuery實(shí)現(xiàn)的多級(jí)下拉菜單效果代碼,涉及jquery鼠標(biāo)事件及頁(yè)面元素的顯示與隱藏效果實(shí)現(xiàn)技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-08-08
js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果
js制作的鼠標(biāo)懸浮時(shí)產(chǎn)生的下拉框效果，需要的朋友可以參考下2012-10-10
jQuery實(shí)現(xiàn)的簡(jiǎn)單圖片輪播效果完整示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的簡(jiǎn)單圖片輪播效果,結(jié)合完整實(shí)例形式分析了jQuery結(jié)合時(shí)間函數(shù)與隨機(jī)數(shù)運(yùn)算操作頁(yè)面元素動(dòng)態(tài)變換相關(guān)實(shí)現(xiàn)技巧,具有不動(dòng)方向滑動(dòng)、淡入淡出等切換效果,代碼非常簡(jiǎn)單實(shí)用,需要的朋友可以參考下2018-02-02
jquery html動(dòng)態(tài)添加的元素綁定事件詳解
下面小編就為大家?guī)硪黄猨query html動(dòng)態(tài)添加的元素綁定事件詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的移動(dòng)端圖片縮放功能組件,結(jié)合實(shí)例形式詳細(xì)分析了jQuery基于移動(dòng)端的圖片縮放功能組件實(shí)現(xiàn)原理、步驟、核心代碼及使用技巧,需要的朋友可以參考下2020-05-05
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)儀表盤，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-04-04
關(guān)于html+ashx開發(fā)中幾個(gè)問題的解決方法
在跟html+ashx打交道的園友們肯定會(huì)發(fā)現(xiàn)，這種模式雖然優(yōu)美，但在開發(fā)中會(huì)遇到一些難處理的地方。我也不例外，下面是自己在實(shí)際開發(fā)中總結(jié)出來的幾條經(jīng)驗(yàn)，希望跟大家分享，更希望得到大家的建議和更好的解決方法！2011-07-07
如何用javascript獲取input輸入框中的值，js/jq通過name、id、class獲取input輸入框中的value。接下來本文通過代碼講解，需要的朋友參考下2019-11-11
jquery 可拖拽的窗體控件實(shí)現(xiàn)代碼
這個(gè)是一個(gè)讓DOM元素可以拖拽的控件，代碼很簡(jiǎn)單，我也是新手，不知道有沒有BUG，自己測(cè)試還行，希望大家發(fā)現(xiàn)BUG，踴躍提出，謝謝。這個(gè)是基于JQUERY開發(fā)的2010-03-03