使用AJAX和Codeigniter从数据库中删除用户

时间:2013-04-21 06:28:46

标签: php jquery ajax codeigniter

我正在尝试使用AJAX和Code Igniter从数据库中删除用户。当我单击删除链接时,用户被删除但页面被重定向并显示成功消息。 AJAX似乎不适用于我的代码。 这是HTML:

<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");
          }

       }
    });

   })
  });

最后控制器用于删除Codeigniter中的用户

 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";
        }

  }

我在哪里弄错了?

6 个答案:

答案 0 :(得分:4)

只是扩展这里已经给出的正确答案。

基本上,您的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请求,并导航到单击的链接。 / p>

答案 1 :(得分:0)

不应触发事件的默认操作。

对于此用途event.preventDefault()

答案 2 :(得分:0)

确保将正确的对象设置为'btn'var:

var btn = $(this);

看看这是不是问题! 顺便说一下,你错过了一个分号:

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

答案 3 :(得分:0)

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

答案 4 :(得分:0)

您没有阻止锚的默认行为,因此它会重定向您并发出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");
          }

       }
    });

   })
  });

我希望这可以帮助:)

答案 5 :(得分:0)

首先将 href 属性更改为名称或值等另一个属性,因为它首次加载,另一次将值存储在 href 中,然后写入此内容以进行刷新页

window.reload('true')

这肯定会帮助你