3

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

  }

我在哪里犯错？

4

6 回答 6

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参数中定义的 url。这就是你所看到的。

您手动定义的事件总是首先触发，因此确实启动了 ajax 请求，但在您的事件处理程序之后，浏览器开始处理默认操作，中断 ajax 请求，并导航到单击的链接。

于 2013-04-21T06:54:54.387 回答
0

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

为此使用event.preventDefault()

于 2013-04-21T06:32:09.583 回答
0

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

var btn = $(this);

看看是不是这个问题！顺便说一句，您在以下位置缺少分号：

 var href = $(this).attr("href")
于 2013-04-21T06:33:41.747 回答
0 
$(".delete").click(function(e){
e.preventDefault();
...
于 2013-04-21T06:48:26.093 回答
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");
          }

       }
    });

   })
  });

我希望这可以帮助:)

于 2013-04-21T10:30:58.563 回答
0

首先，您将href属性更改为另一个属性，例如名称或值，因为它第一次加载，另一次将值存储在href中，然后将其写入刷新页面

window.reload('true');

这肯定会帮助你

于 2017-11-02T07:57:16.223 回答