日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

 
 
 
 

  
  
  
  
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; 
 
 
 
 

 
 
 
 

  
  
  
  

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

 
 
 
 

  
  
  
  
  
  
  
  
  
    
客戶類(lèi)別
  
  
  
  
  
      
  
  
  
  
           
  
  
  
  
      
  
  
  
  
    
新增一項(xiàng)
  
  
  
  
  

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

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 = "
  
  
  
  
  
    
";  
  
  
  
  
    $("#catalist").append(str);  
  
  
  
  
} 
 
 
 
 

通過(guò)單擊“新增一項(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)輸入類(lèi)別!");  
  
  
  
  
            return false;  
  
  
  
  
        }  
  
  
  
  
        var str = escape(input_str);  
  
  
  
  
        $.getJSON("post.php?action=add&title="+str,function(json){  
  
  
  
  
            if(json.success==1){  
  
  
  
  
                var li = "  
  
  
  
  
                "+  
  
  
  
  
                json.title+"
";  
  
  
  
  
                $("#catalist").append(li);  
  
  
  
  
                btn.parent().remove();  
  
  
  
  
                jSuccess("恭喜，操作成功!");  
  
  
  
  
            }else{  
  
  
  
  
                jNotify("出錯(cuò)了！");  
  
  
  
  
                return false;  
  
  
  
  
            }  
  
  
  
  
        });  
  
  
  
  
    });  
  
  
  
  
}); 
 
 
 
 

首先獲取用戶輸入的內(nèi)容，如果沒(méi)有輸入任何內(nèi)容則提示用戶輸入內(nèi)容，然后將用戶輸入的內(nèi)容進(jìn)行escape編碼，保證中文字符能正確傳輸給后臺(tái)程序識(shí)別。然后通過(guò)$.getJSON方法向后臺(tái)post.php發(fā)起一個(gè)異步的Ajax請(qǐng)求。后臺(tái)post.php接收參數(shù)值并進(jìn)行相關(guān)處理，前端代碼通過(guò)響應(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;  
  
  
  
  
} 
 
 
 
 

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

添加項(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;  
  
  
  
  
                   }  
  
  
  
  
                }  
  
  
  
  
             });  
  
  
  
  
            }  
  
  
  
  
        });  
  
  
  
  
    }); 
 
 
 
 

顯然，通過(guò)單擊“刪除”按鈕，同樣是向后臺(tái)post.php發(fā)送一個(gè)ajax請(qǐng)求，將刪除項(xiàng)對(duì)應(yīng)的參數(shù)ID發(fā)送給后臺(tái)并響應(yīng)后臺(tái)處理結(jié)果，如果成功，則提示用戶“刪除成功”，并通過(guò)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é)果供前端處理。

#p#

在上篇中，我們?cè)敿?xì)講解了如何實(shí)現(xiàn)列表管理的新增和刪除操作，可以看出，前端頁(yè)面通過(guò)ajax與后臺(tái)通信，根據(jù)后臺(tái)處理結(jié)果響應(yīng)前端頁(yè)面交互操作，這是一個(gè)很典型的Ajax和JSON應(yīng)用的例子。

編輯項(xiàng)操作

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

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

 
 
 
 

  
  
  
  
//編輯選項(xiàng)  
  
  
  
  
$(".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 = "";  
  
  
  
  
    $(this).next().wrapInner(input);  
  
  
  
  
}); 
 
 
 
 

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

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

 
 
 
 

  
  
  
  
//編輯處理  
  
  
  
  
$(".oks").live('click',function(){  
  
  
  
  
    var input_str = $(this).parent().find('input').val();  
  
  
  
  
    if(input_str==""){  
  
  
  
  
        jNotify("請(qǐng)輸入類(lèi)別名稱(chēng)!");  
  
  
  
  
        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 = "
  
  
  
  
                    title='編輯'>"+input_str+";  
  
  
  
  
                    btn.parent().html(strs);  
  
  
  
  
                }else{  
  
  
  
  
                    jNotify("操作失敗!");  
  
  
  
  
                    return false;  
  
  
  
  
                }  
  
  
  
  
           }  
  
  
  
  
    });  
  
  
  
  
}); 
 
 
 
 

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

后臺(tái)post.php處理編輯項(xiàng)操作與上篇的新增項(xiàng)操作差不多，代碼如下：

 
 
 
 

  
  
  
  
case 'edit':  //編輯項(xiàng)  
  
  
  
  
    $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語(yǔ)句中，代碼接收了前端傳來(lái)的id和title參數(shù)，并對(duì)title參數(shù)進(jìn)行解碼，然后更新數(shù)據(jù)表中對(duì)應(yīng)的項(xiàng)，并輸出執(zhí)行結(jié)果給前臺(tái)處理。

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

 
 
 
 

  
  
  
  
//取消編輯  
  
  
  
  
$(".cancer").live('click',function(){  
  
  
  
  
    var li = $(this).parent().html();  
  
  
  
  
    var str_1 = $(this).parent().find('input').val();  
  
  
  
  
    var strs = "  
  
  
  
  
    "+str_1+"";  
  
  
  
  
    $(this).parent().html(strs);  
  
  
  
  
}); 
 
 
 
 

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

總結(jié)

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