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

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

  }

我在哪里犯了错误？

- sabin

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 参数所指定的 URL 地址。这就是我们看到的跳转行为。

虽然你手动定义了事件，使得 ajax 请求成功启动，但紧接着你的事件处理程序被执行后，浏览器开始执行默认操作，中断了 ajax 请求并跳转到被点击的链接页面。

- Aeolun

---

你是对的，event.preventDefault() 很有帮助。我尝试添加一个 alert() 来告诉用户已被删除，但 fadeOut() 没有起作用。为什么会这样？ - sabin

嗯，fadeOut的代码看起来没问题。但我不确定表格行是否可以淡出。也许你可以尝试使用.hide()代替。 - Aeolun

Answer 2

首先，您需要将href属性更改为另一个属性，例如名称或值，因为第一次加载时它会存储在href中，之后再次加载时也会存储在其中。然后编写以下代码以刷新页面：

window.reload('true');

这肯定会对你有所帮助

- Faisal Alam

Answer 3

确保您将正确的对象设置为“btn”变量：

var btn = $(this);

看看这是否是问题！ 顺便提一下，你在以下代码中缺少了一个分号：

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

- M Reza Saberi

---

你可以随时检查答案并接受它们，如果它们对你有用的话，也可以投票支持它们！ - M Reza Saberi

Answer 4

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

- Amir

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

       }
    });

   })
  });

希望这能有所帮助 :)

- Seder

Answer 6

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

为此，请使用event.preventDefault()

- GBD

---

我认为你的意思是，“事件的默认操作不应该被触发”，对吗？ - Aeolun