今天的任務內容:將前臺頁面搜索結果中,不喜歡的內容(鏈接),刪除掉,因為整個網站的編程框架式thinkphp,運用js中的ajax對頁面進行響應,調用后臺php接口,實現前臺和后臺數據庫的同時更新.

首先我們需要做的就是在前臺頁面中添加一個文本“刪除”,可以這么添加:

<a href="javascript：void(0);" id= "<php>echo $val[id]</php>" class="delete" >刪除</a>

上面的html代碼的意思:就是給刪除添加一個href，這個href是個js函數,類似于超鏈接的作用,當然對于我這樣的新手在剛開始的時候會有疑惑,我們平時的超鏈接不是這樣的,網頁中很多的javascript：void(0),那程序怎么知道用戶點擊刪除后,會響應其真正對應的js函數呢？別急,這就是為什么會為刪除添加id以及class這樣的標簽,相信我把js中的代碼公布出來以后你就會明白了,代碼如下:

1. jQuery(".list a.delete").click(function(){ 
2.             if(confirm("你確定要刪除嗎？")){ 
3.                 var _this=this; 
4.                 var id = jQuery(_this).attr("id"); 
5.                 jQuery.ajax({ 
6.                     url : '/Search/index.php/Jason/delete?', 
7.                     data : {'id':id}, 
8.                     dataType : 'json', 
9.                     success : function(data){ 
10.                         var del = data.del; 
11.                         if(del == 1){//刪除成功 
12.                             jQuery("#"+id).parents(".list").remove(); 
13.                         }else{//刪除失敗 
14.                             alert("刪除失敗"); 
15.                         } 
16.                     } 
17.                 }); 
18.             } 
19.            
20.     }); 

大家看函數的頭部：jQuery(".list a.delete").click(),jQuery后面的標簽是很重要的，這就保證了jquery很準確的響應頁面中用戶點擊的“位置”，添加的事件為click(),在click里添加響應事件的代碼，var id = jQuery(_this).attr("id");獲取a對應的id，因為這個id是我們刪除數據庫時用到的鏈接id，當然這種直接明文的方式不好，在這里只是介紹整個響應過程。調用ajax，實現異步的運行整個過程。我們設置了js接受的是json串，這里的方式應該有很多種吧，我沒有去嘗試，大家要是有興趣可以自行嘗試一下。/Search/index.php/Jason/delete?這句話就是js去請求php的接口，php接口對用的代碼如下:

注意ajax在求php接口時的路徑,也就是delete函數必須放在JasonAction.class.php中,此例子是必須這樣的:

1. public function delete(){ 
2.         if($this->isGet()){ 
3.             $userId = session("uid");//用戶登錄 
4.             if(!empty($userId)){ 
5.                 $a = M('***'); 
6.                 $id = $this->_get('id'); 
7.                 $result=$a->where("id=$id")->delete();//刪除 
8.                 if($result > 0){ 
9.                     $arr = array("del"=>'1'); 
10.                 }else{ 
11.                     $arr = array("del"=>'0'); 
12.                 } 
13.                 $json_str = json_encode($arr); 
14.                 echo $json_str;//返回給js 
15.             } 
16.         } 
17.     } 

相信大家對上面的代碼不會陌生吧,整個過程都是thinkphp框架內部配置完畢的.

var del = data.del;這句是接受php代碼返回來的json串中del這個key的value,進而在前臺進行頁面更新和響應.

1. if(del == 1){//刪除成功 
2.      jQuery("#"+id).parents(".list").remove();//這句話就是后臺刪除成功后，直接在前臺對響應的div進行刪除，這樣性能就會很快，無需進行后臺數據的重新提取至前臺頁面中， 
3.  }else{//刪除失敗 
4.      alert("刪除失敗"); 
5.  } 

整個響應的過程就是這樣,至于效果優化,是優化和細化方面的問題,后來,身邊的同時又告訴我前臺移除響應鏈接的另一個動態效果:

將:jQuery("#"+id).parents(".list").remove();替換為:

1. jQuery("#"+id).parents(".list").slideUp("slow", function(){ 
2.       jQuery(this).remove(); 
3. }); 

大家不妨試試效果,很不錯的,好了,響應過程記載完畢,只是自己的個人見解和認知.