Question

我正在尝试使用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";
        }

  }

我在哪里弄错了？

Answer 1

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

基本上，您的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>

Answer 2

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

对于此用途event.preventDefault()

Answer 3

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

var btn = $(this);

看看这是不是问题！顺便说一下，你错过了一个分号：

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

Answer 4

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

Answer 5

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

       }
    });

   })
  });

我希望这可以帮助:)

Answer 6

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

window.reload('true')

这肯定会帮助你

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

6 个答案: