使用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从数据库中删除用户

回答

相关问题