Ajax 删除表中的数据时不刷新 - Laravel

Question

我的问题是我可以点击按钮，但需要刷新才能删除它。有什么东西让我的 ajax 代码出现问题，为什么它会让人耳目一新？我想要一个按钮，点击删除它会自动删除而不刷新。

我的按钮

<button type="button" data-client_id="{{ $client->id }}" class="btn-archive btn btn-info">Active</button>

<button type="button" data-client_id="{{ $client->id }}" class="btn-delete fa fa-trash btn btn-danger"></button>

我的AJAX

 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
$(document).on('click','.btn-archive',function(){
   var clientID=$(this).attr('data-client_id');
   var url='/admin/clients/archTrash/'+clientID;
   callAjax(url);
});

$(document).on('click','.btn-delete',function(){
   var clientID=$(this).attr('data-client_id');
   var url='/admin/clients/archTrashPermanent/'+clientID;
   callAjax(url);
});

function callAjax(url){
   $.ajax({
       url:url,
       dataType:'json',
       type:'GET',
       success:function(response){
          console.log(response);
       },
       error:function(err){
         console.log(err);
       }
   });
}
</script>

表结构

` 类客户端扩展模型 { 使用软删除；

 protected $dates = ['deleted_at'];
 // Table Name
 protected $table = 'clients';
 // Primary Key
 public $primaryKey = 'id';
 // Timestamps
 public $timestamps = true;`

Answer 1

如果您想删除 larval 中的记录而不使用 ajax 刷新页面，请使用以下代码。我正在使用此代码并且它工作正常

1. 在此按钮类中将 id 发送到 ajax，您可以将其关联到您的 id <button class="deleteRecord btn btn-danger" data-id="{{ $party->id }}" >Delete Record</button>

2. ajax代码is like this with sweet alert

$(".deleteRecord").click(function(){

var id = $(this).data("id");
var token = $("meta[name='csrf-token']").attr("content");
var parent = $(this).parent();

  swal({
                  title: "Wait..!",
                  text: "Are You sure, You want to delete Party?",
                  icon: "warning",
                  buttons: true,
                  dangerMode: true,
                }).then((willDelete) => {

                    if (willDelete) {
$.ajax({
    url: "delete_party/"+id,
    type: 'DELETE',
    data: {
        "id": id,
        "_token": token,
    },
    success: function (){

           parent.slideUp(300, function () {
                parent.closest("tr").remove();
            });


    },
    error: function() {

        alert('error');
    },
});
  

   } else {

         swal("Your Party is safe");
   }

});

});

``

Answer 2

这就是我正在做的：

在创建表时，我将唯一的 ID（在本例中为用户 ID）附加到可以删除的每一行。这就是我在刀片中的操作方式：

@foreach ($visitors as $visitor)
    <tr class="data-user-id-{{$visitor->id}}">
        <td class="text-left">
            {{$visitor->name}}
        </td>
        <td class="text-left" data-original-value="11">
            {{$visitor->email}}
        </td>
        <td class="text-left">
            <a href="#" data-user-id="{{$visitor->id}}" class="btn btn-small btn-info btn-visitor-enable-disable">
                Enable
            </a>
        </td>
        <td class="text-left">
           <a href="#" data-user-id="{{$visitor->id}}" class="btn btn-small btn-danger btn-visitor-delete">
              X
           </a>
         </td>
   </tr>
@endforeach

然后，在我的 .ajax 调用的成功方法中，我只需使用已删除行的唯一 ID 选择该行并删除该行。我就是这样做的。

$(".btn-visitor-delete").on('click',function(e) {
    e.preventDefault();
    const userId = $(this).attr('data-user-id');
    var confirmation = confirm("Are you sure you want to delete this user?");
    if (confirmation) {
        $.ajax({
            type:'GET',
            url:'/dashboard/allwhitelistedusers/delete/' + userId,
            headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
            // data:{user_id: userId},
            success:function(data){
                //Refresh the grid
                $(".data-user-id-"+userId).remove();
                alert(data.success);
            },
            error: function(e){
                alert(e.error);
            }
        });
    }
    else{
        //alert ('no');
        return false;
    }
});

Answer 3

您只完成了一半的工作：数据已发送到服务器，并且该站点上的一切似乎都按预期工作。但是您想“删除客户端”（我假设您希望表格行消失）而不重新加载页面。您需要在成功处理程序中对此进行编码：

success: function(response) {
    $('#client-data').remove();
    console.log(response);
}

请注意，此示例代码将始终删除 ID 为 client-data 的相同元素。您可能需要使用 $(this).parent().remove(); 之类的东西，因为您的页面上似乎有多个删除按钮。