日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產(chǎn)品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營銷解決方案
jQuery+Ajax+PHP+MySQL實現(xiàn)分類列表管理

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

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設計、成都網(wǎng)站建設、網(wǎng)頁設計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務。立足成都服務市中,10多年網(wǎng)站建設經(jīng)驗,價格優(yōu)惠、服務專業(yè),歡迎來電咨詢建站服務:13518219792

本文將采用jQuery+Ajax+PHP+MySQL來實現(xiàn)一個客戶分類列表的管理，如何利用Ajax和Json技術讓用戶操作起來覺得更輕松，且看本文一一講解。

展示‖下載

準備階段

您需要具備HTML和jQuery等前端知識，以及基本的PHP程序和MySQL數(shù)據(jù)庫相關知識。要實現(xiàn)本文中的DEMO示例，首先需要一個MySQLl數(shù)據(jù)庫：

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

其次在頁面中引入jquery庫，以及操作結果提示插件jNotify和刪除確認插件hiAlert。

將需要準備的文件一并加入到index.php的之間。

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.   
    3. 
  
  
  
  
  3.   
    4. 
  
  
  
  
  4.   
    5. 
  
  
  
  
  5.  
    6.

準備完畢我們進入主題。

index.php

index.php是主體頁面，讀取了數(shù)據(jù)庫中的分類數(shù)據(jù)，以列表展示，并提供了增加、刪除和修改的功能按鈕。

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. include_once('connect.php'); //連接數(shù)據(jù)庫  
    3. 
  
  
  
  
  3. $query = mysql_query("select * from catalist order by cid asc");  
    4. 
  
  
  
  
  4. while($row=mysql_fetch_array($query)){  
    5. 
  
  
  
  
  5.     $list .= "  
    6. 
  
  
  
  
  6.     ".$row['title']."
    7. ";  
  
  
  
  
  7. }  
    8. 
  
  
  
  
  8. ?> 
    9.

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

 
 
 
 
    
  
  
  
  
  1.   
    2. 
  
  
  
  
  2.     
    客戶類別
      
    3. 
  
  
  
  
  3.       
    4. 
  
  
  
  
  4.            
    5. 
  
  
  
  
  5.       
    6. 
  
  
  
  
  6.     
    新增一項
      
    7.
 

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

CSS

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

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

新增項操作

在global.js加入addOpt()函數(shù):

 
 
 
 
    
  
  
  
  
  1. function addOpt(){  
    2. 
  
  
  
  
  2.     var str = "
  3.   
    4. 
  
  
  
  
  4.     
    5. ";  
  
  
  
  
  5.     $("#catalist").append(str);  
    6. 
  
  
  
  
  6. } 
    7.

通過單擊“新增一項”鏈接，向DOM中添加了一個新增項的輸入框。

當用戶輸入內(nèi)容后，點擊“保存”，將會觸發(fā)一個ajax操作，先看代碼：

 
 
 
 
    
  
  
  
  
  1. $(function(){  
    2. 
  
  
  
  
  2.     //保存新增項  
    3. 
  
  
  
  
  3.     $(".ok").live('click',function(){  
    4. 
  
  
  
  
  4.         var btn = $(this);  
    5. 
  
  
  
  
  5.         var input_str = btn.parent().find('input').val();  
    6. 
  
  
  
  
  6.         if(input_str==""){  
    7. 
  
  
  
  
  7.             jNotify("請輸入類別!");  
    8. 
  
  
  
  
  8.             return false;  
    9. 
  
  
  
  
  9.         }  
    10. 
  
  
  
  
  10.         var str = escape(input_str);  
    11. 
  
  
  
  
  11.         $.getJSON("post.php?action=add&title="+str,function(json){  
    12. 
  
  
  
  
  12.             if(json.success==1){  
    13. 
  
  
  
  
  13.                 var li = "  
    14. 
  
  
  
  
  14.                 "+  
    15. 
  
  
  
  
  15.                 json.title+"
    16. ";  
  
  
  
  
  16.                 $("#catalist").append(li);  
    17. 
  
  
  
  
  17.                 btn.parent().remove();  
    18. 
  
  
  
  
  18.                 jSuccess("恭喜，操作成功!");  
    19. 
  
  
  
  
  19.             }else{  
    20. 
  
  
  
  
  20.                 jNotify("出錯了！");  
    21. 
  
  
  
  
  21.                 return false;  
    22. 
  
  
  
  
  22.             }  
    23. 
  
  
  
  
  23.         });  
    24. 
  
  
  
  
  24.     });  
    25. 
  
  
  
  
  25. }); 
    26.

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

如果要取消新增項操作，只需當單擊“取消”按鈕時執(zhí)行以下代碼：

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

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

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

通過接收前端提交的內(nèi)容，進行解碼后，寫入數(shù)據(jù)表中，并輸出JSON數(shù)據(jù)格式供前臺處理。關于uniDecode()函數(shù)，讀者可以下載源碼了解，主要是為了正確讀取解析jquery通過異步提交的中文字符串。

添加項操作已經(jīng)完成，下面請看刪除項操作。

刪除項操作

回到global.js，在$(function(){})加入下面的代碼：

 
 
 
 
    
  
  
  
  
  1. //刪除項  
    2. 
  
  
  
  
  2.     $(".del").live('click',function(){  
    3. 
  
  
  
  
  3.         var btn = $(this);  
    4. 
  
  
  
  
  4.         var id = btn.parent().attr('rel');  
    5. 
  
  
  
  
  5.         var URL = "post.php?action=del";  
    6. 
  
  
  
  
  6.         hiConfirm('您確定要刪除嗎？', '提示',function(r){  
    7. 
  
  
  
  
  7.             if(r){  
    8. 
  
  
  
  
  8.               $.ajax({  
    9. 
  
  
  
  
  9.                 type: "POST",  
    10. 
  
  
  
  
  10.                 url: URL,  
    11. 
  
  
  
  
  11.                 data: "id="+id,  
    12. 
  
  
  
  
  12.                 success: function(msg){  
    13. 
  
  
  
  
  13.                    if(msg==1){  
    14. 
  
  
  
  
  14.                        jSuccess("刪除成功!");  
    15. 
  
  
  
  
  15.                        btn.parent().remove();  
    16. 
  
  
  
  
  16.                    }else{  
    17. 
  
  
  
  
  17.                        jNotify("操作失敗!");  
    18. 
  
  
  
  
  18.                        return false;  
    19. 
  
  
  
  
  19.                    }  
    20. 
  
  
  
  
  20.                 }  
    21. 
  
  
  
  
  21.              });  
    22. 
  
  
  
  
  22.             }  
    23. 
  
  
  
  
  23.         });  
    24. 
  
  
  
  
  24.     }); 
    25.

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

后臺post.php接收參數(shù)并作出相應的處理：

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

以上這段代碼片段，加在post.php的switch語句中，執(zhí)行了刪除語句，并輸出執(zhí)行結果供前端處理。

#p#

在上篇中，我們詳細講解了如何實現(xiàn)列表管理的新增和刪除操作，可以看出，前端頁面通過ajax與后臺通信，根據(jù)后臺處理結果響應前端頁面交互操作，這是一個很典型的Ajax和JSON應用的例子。

編輯項操作

用戶通過單擊“編輯”按鈕，相應的項會立即變?yōu)榫庉嫚顟B(tài)，出現(xiàn)一個輸入框，用戶可以重新輸入新的內(nèi)容，然后點擊“保存”按鈕完成編輯操作，也可以單擊“取消”按鈕取消編輯狀態(tài)。

首先，通過單擊“編輯”按鈕，實現(xiàn)編輯狀態(tài)，在global.js的$(function(){...})中加入如下代碼：

 
 
 
 
    
  
  
  
  
  1. //編輯選項  
    2. 
  
  
  
  
  2. $(".edit").live('click',function(){  
    3. 
  
  
  
  
  3.     $(this).removeClass('edit').addClass('oks').attr('title','保存');  
    4. 
  
  
  
  
  4.     $(this).prev().removeClass('del').addClass('cancer').attr('title','取消');  
    5. 
  
  
  
  
  5.     var str = $(this).parent().text();  
    6. 
  
  
  
  
  6.     var input = "";  
    7. 
  
  
  
  
  7.     $(this).next().wrapInner(input);  
    8. 
  
  
  
  
  8. }); 
    9.

從代碼中可以看出，其實是改變了“編輯”按鈕和“刪除”按鈕的class樣式，修改了其title屬性，然后將分類名稱用一個input輸入框包裹(wrapInner)，這樣就生成了一個編輯狀態(tài)。

要將修改好的內(nèi)容提交給后臺處理，通過單擊“保存”按鈕，會發(fā)生下面的事情，請看代碼：

 
 
 
 
    
  
  
  
  
  1. //編輯處理  
    2. 
  
  
  
  
  2. $(".oks").live('click',function(){  
    3. 
  
  
  
  
  3.     var input_str = $(this).parent().find('input').val();  
    4. 
  
  
  
  
  4.     if(input_str==""){  
    5. 
  
  
  
  
  5.         jNotify("請輸入類別名稱!");  
    6. 
  
  
  
  
  6.         return false;  
    7. 
  
  
  
  
  7.     }  
    8. 
  
  
  
  
  8.     var str = escape(input_str);  
    9. 
  
  
  
  
  9.     var id = $(this).parent().attr("rel");  
    10. 
  
  
  
  
  10.     var URL = "post.php?action=edit";  
    11. 
  
  
  
  
  11.           
    12. 
  
  
  
  
  12.     var btn = $(this);  
    13. 
  
  
  
  
  13.     $.ajax({  
    14. 
  
  
  
  
  14.             type: "POST",  
    15. 
  
  
  
  
  15.             url: URL,  
    16. 
  
  
  
  
  16.             data: "title="+str+"&id="+id,  
    17. 
  
  
  
  
  17.             success: function(msg){  
    18. 
  
  
  
  
  18.                 if(msg==1){  
    19. 
  
  
  
  
  19.                     jSuccess("編輯成功!");  
    20. 
  
  
  
  
  20.                     var strs = "
  
  
  
  
  21.                     title='編輯'>"+input_str+";  
    22. 
  
  
  
  
  22.                     btn.parent().html(strs);  
    23. 
  
  
  
  
  23.                 }else{  
    24. 
  
  
  
  
  24.                     jNotify("操作失敗!");  
    25. 
  
  
  
  
  25.                     return false;  
    26. 
  
  
  
  
  26.                 }  
    27. 
  
  
  
  
  27.            }  
    28. 
  
  
  
  
  28.     });  
    29. 
  
  
  
  
  29. }); 
    30.

通過單擊編輯狀態(tài)下的“保存”按鈕，首先獲取輸入框的內(nèi)容，如果沒有輸入任何內(nèi)容則提示用戶輸入內(nèi)容，然后將用戶輸入的內(nèi)容進行escape編碼，同時還要獲取編輯項對應的ID，將輸入的內(nèi)容和ID作為參數(shù)通過$.ajax提交給后臺post.php處理，并響應后臺返回的信息，如果返回成功，則提示用戶“編輯成功”，并且解除編輯狀態(tài)，如果返回失敗，則提示用戶“操作失敗”。

后臺post.php處理編輯項操作與上篇的新增項操作差不多，代碼如下：

 
 
 
 
    
  
  
  
  
  1. case 'edit':  //編輯項  
    2. 
  
  
  
  
  2.     $id = $_POST['id'];  
    3. 
  
  
  
  
  3.     $title = uniDecode($_POST['title'],'utf-8');  
    4. 
  
  
  
  
  4.     $title = htmlspecialchars($title,ENT_QUOTES);  
    5. 
  
  
  
  
  5.     $query = mysql_query("update catalist set title='$title' where cid='$id'");  
    6. 
  
  
  
  
  6.     if($query){  
    7. 
  
  
  
  
  7.         echo '1';  
    8. 
  
  
  
  
  8.     }else{  
    9. 
  
  
  
  
  9.         echo '2';  
    10. 
  
  
  
  
  10.     }  
    11. 
  
  
  
  
  11.     break; 
    12.

以上代碼片段加在post.php的switch語句中，代碼接收了前端傳來的id和title參數(shù)，并對title參數(shù)進行解碼，然后更新數(shù)據(jù)表中對應的項，并輸出執(zhí)行結果給前臺處理。

要取消編輯狀態(tài)，則通過單擊“取消”執(zhí)行以下代碼：

 
 
 
 
    
  
  
  
  
  1. //取消編輯  
    2. 
  
  
  
  
  2. $(".cancer").live('click',function(){  
    3. 
  
  
  
  
  3.     var li = $(this).parent().html();  
    4. 
  
  
  
  
  4.     var str_1 = $(this).parent().find('input').val();  
    5. 
  
  
  
  
  5.     var strs = "  
    6. 
  
  
  
  
  6.     "+str_1+"";  
    7. 
  
  
  
  
  7.     $(this).parent().html(strs);  
    8. 
  
  
  
  
  8. }); 
    9.

其實，代碼重新組裝了一個字符串，重新將組裝的字符串替代了編輯狀態(tài)，即取消了編輯狀態(tài)。

總結

通過這樣一個實際應用的案例，我們可以體驗前端技術的優(yōu)越性，用戶完成的每一步操作是那么的友好，這是用戶體驗的一個方面。Jquery庫讓ajax操作變得如此簡單，文中代碼中還用到了jquery的live方法，這是為了綁定動態(tài)創(chuàng)建DOM元素所必需的。此外，文中沒有提到驗證輸入類表的重復性，這個是需要后臺驗證的，讀者朋友們可以自行寫一段驗證代碼。最后，順便提一下，如果本例再加上一個拖動排序的功能，是不是會更完美呢?關于拖動排序的實現(xiàn)，helloweba.com也有相關實例講解，各位讀者朋友可以先熟知。


分享標題：jQuery+Ajax+PHP+MySQL實現(xiàn)分類列表管理
文章網(wǎng)址：http://www.dlmjj.cn/article/dpdiddp.html