使用AJAX和Codeigniter從數據庫中刪除用戶

我試圖用AJAX和Code Igniter從數據庫中刪除用戶。當我點擊刪除鏈接時，用戶被刪除，但頁面被重定向並顯示成功消息。 AJAX似乎不能在我的代碼中工作。這裏的HTML：使用AJAX和Codeigniter從數據庫中刪除用戶

<table class="table table-hover"> 
<thead> 
<tr> 
<th>#</th> 
<th>First Name</th> 
<th>Last Name</th> 
<th>Email</th> 
<th>Username</th> 
<th>Password</th> 
<th>Action</th> 
</tr> 
</thead> 
<tbody> 




<?php foreach($users as $u){?> 
<tr> 



<td><?php echo $u['id']; ?></td> 



<td><?php echo $u['firstname']; ?></td> 



<td><?php echo $u['lastname']; ?></td> 



<td><?php echo $u['email']; ?></td> 



<td><?php echo $u['username']; ?></td> 



<td><?php echo $u['password']; ?></td> 



<td> 



<a href="#" >Edit</a> | 
<?php $id=$u['id'];?> 
<a href="<?php echo site_url("users/delete/$id")?>" class="delete">Delete</a> 



</td> 
<?php }?> 
</tr> 



</tbody> 
</table>

和這裏的AJAX：

$(document).ready(function(){ 

    $(".delete").click(function(){ 
     alert("Delete?"); 
     var href = $(this).attr("href"); 
     var btn = this; 

     $.ajax({ 
      type: "GET", 
      url: href, 
      success: function(response) { 

      if (response == "Success") 
      { 
      $(btn).closest('tr').fadeOut("slow"); 
      } 
      else 
      { 
      alert("Error"); 
      } 

     } 
    }); 

    }) 
    });

，最後控制器功能刪除用戶笨

public function delete($id)//for deleting the user 
    { 
    $this->load->model('Users_m'); 

    $delete=$this->Users_m->delete_user($id); 
     if($delete) 
     { 
      echo "Success"; 
     } 
    else 
     { 
      echo "Error"; 
     } 

    }

我在哪裏做的錯誤？

來源

2013-04-21 sabin

只是爲了在這裏已經給正確答案擴大。

基本上，你的JS代碼應該是這樣的：

$(document).ready(function(){ 

$(".delete").click(function(event){ 
    alert("Delete?"); 
    var href = $(this).attr("href") 
    var btn = this; 

     $.ajax({ 
     type: "GET", 
     url: href, 
     success: function(response) { 

      if (response == "Success") 
      { 
      $(btn).closest('tr').fadeOut("slow"); 
      } 
      else 
      { 
      alert("Error"); 
      } 

     } 
     }); 
    event.preventDefault(); 
    }) 
});

的event.preventDefault()部分是很重要的位置。因爲它阻止瀏覽器採用默認操作，如果您點擊某個元素。

如果是鏈接，則會將您重定向到參數href中定義的網址。這是你看到發生的事情。

您的手動定義的事件總是首先被觸發，因此ajax請求確實已啓動，但在此之後，您的事件處理程序，瀏覽器開始處理默認操作，中止ajax請求並導航到單擊的鏈接。

來源

2013-04-21 06:54:54 Aeolun

你是正確的event.preventDefault（）幫助。我試圖添加alert（），說用戶已被刪除，但fadeOut（）不起作用。這是爲什麼？ – sabin 2013-04-21 09:58:28

嗯，fadeOut的代碼看起來對我來說是正確的。我不確定表格行是否可以淡化。也許你可以用'.hide（）'來代替它。 – Aeolun 2013-04-22 12:32:41

不應觸發事件的默認操作。

對於這種使用event.preventDefault()

來源

2013-04-21 06:32:09 GBD

我想你的意思是'事件的默認動作_should_不會被觸發'？ – Aeolun 2013-04-21 06:43:33

@Aeolun是的，謝謝糾正 – GBD 2013-04-21 06:46:51

確保你正確的對象設置爲 'BTN' VAR：

var btn = $(this);

看看這是問題！順便說一下你缺少一個分號：

var href = $(this).attr("href")

來源

2013-04-21 06:33:41 goseo

做到了。感謝@Distinct進行更正。 – sabin 2013-04-21 10:00:00

你可以隨時檢查接受的答案，或者如果他們爲你工作，就投票給他們！ – goseo 2013-04-21 10:04:39

$(".delete").click(function(e){ 
e.preventDefault(); 
...

來源

2013-04-21 06:48:26 Amir

感謝您的幫助 – sabin 2013-04-21 08:43:50

你沒有阻止錨的默認行爲，所以它會重定向你，使Ajax請求

$(document).ready(function(){ 

    $(".delete").click(function(e){ 
     alert("Delete?"); 
     e.preventDefault(); 
     var href = $(this).attr("href"); 
     var btn = this; 

     $.ajax({ 
      type: "GET", 
      url: href, 
      success: function(response) { 

      if (response == "Success") 
      { 
      $(btn).closest('tr').fadeOut("slow"); 
      } 
      else 
      { 
      alert("Error"); 
      } 

     } 
    }); 

    }) 
    });

我希望這能幫助:)

來源

2013-04-21 10:30:58 Sedz

首先你改變HREF屬性另一個屬性，如名稱或值，因爲它第一次加載和另一次它存儲值在和之後，寫這個刷新頁

window.reload('true')

這一定會幫助你

來源

2017-11-02 07:57:16

使用AJAX和Codeigniter從數據庫中刪除用戶

回答

相關問題