溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了如何采用Jquery+Ajax+PHP+MySQL實現分類列表管理，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
前端頁面通過ajax與后臺通信，根據后臺處理結果響應前端頁面交互操作，這是一個很典型的Ajax和JSON應用的例子。
用戶通過單擊“編輯”按鈕，相應的項會立即變為編輯狀態，出現一個輸入框，用戶可以重新輸入新的內容，然后點擊“保存”按鈕完成編輯操作，也可以單擊“取消”按鈕取消編輯狀態。
首先，通過單擊“編輯”按鈕，實現編輯狀態，在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)，這樣就生成了一個編輯狀態。
要將修改好的內容提交給后臺處理，通過單擊“保存”按鈕，會發生下面的事情，請看代碼：
//編輯處理
$(".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;
}
}
});
});
通過單擊編輯狀態下的“保存”按鈕，首先獲取輸入框的內容，如果沒有輸入任何內容則提示用戶輸入內容，然后將用戶輸入的內容進行escape編碼，同時還要獲取編輯項對應的ID，將輸入的內容和ID作為參數通過$.ajax提交給后臺post.php處理，并響應后臺返回的信息，如果返回成功，則提示用戶“編輯成功”，并且解除編輯狀態，如果返回失敗，則提示用戶“操作失敗”。
后臺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參數，并對title參數進行解碼，然后更新數據表中對應的項，并輸出執行結果給前臺處理。
要取消編輯狀態，則通過單擊“取消”執行以下代碼：
//取消編輯
$(".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);
});
其實，代碼重新組裝了一個字符串，重新將組裝的字符串替代了編輯狀態，即取消了編輯狀態。
通過這樣一個實際應用的案例，我們可以體驗前端技術的優越性，用戶完成的每一步操作是那么的友好，這是用戶體驗的一個方面。Jquery庫讓ajax操作變得如此簡單，文中代碼中還用到了jquery的live方法，這是為了綁定動態創建DOM元素所必需的。此外，文中沒有提到驗證輸入類表的重復性，這個是需要后臺驗證的，讀者朋友們可以自行寫一段驗證代碼。最后，順便提一下，如果本例再加上一個拖動排序的功能，是不是會更完美呢？關于拖動排序的實現，xuebuyuan.com也有相關實例講解，各位讀者朋友可以先熟知。我會隨后奉上這份美餐的，敬請關注。
上述內容就是如何采用Jquery+Ajax+PHP+MySQL實現分類列表管理，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
