Laravel中Ajax无法删除DataTables行的问题求助

我在Laravel中使用DataTables实现删除数据库行并重新加载列表的功能，但无法正常工作：

• 收到「Data Not Deleted」错误提示
• setTimeout函数未生效，提示消息无法自动消失
• 作为Ajax新手，难以定位问题，相关代码如下：

按钮代码 #

$button = '   <button type="button" name="edit" id="'.$data->id.'" class="delete btn btn-danger btn-sm"> <i class="fas fa-fw  fa-trash"></i> Delete</button>';

确认删除模态框 #

<div class="modal fade" id="confirmModal" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
    <div class="modal-dialog">
    <div class="modal-content">
    <form method="post" id="sample_form" class="form-horizontal">
        <div class="modal-header">
            <h5 class="modal-title" id="ModalLabel">Confirmation</h5>
            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
            <h4 align="center" style="margin:0;">Are you sure you want to remove this data?</h4>
        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            <button type="button" name="ok_button" id="ok_button" class="btn btn-danger">OK</button>
        </div>
    </form>
    </div>
    </div>
</div>

前端脚本 #

var employee_id;

$(document).on('click', '.delete', function(){
    employee_id = $(this).attr('id');
    $('#confirmModal').modal('show');
});

$('#ok_button').click(function(){
    $.ajax({
        url:"/admin/employees/destroy/"+employee_id,
        beforeSend:function(){
            $('#ok_button').text('Deleting...');
        },
        success:function(data)
        {
            setTimeout(function(){
            $('#confirmModal').modal('hide');
            $('#employee_table').DataTable().ajax.reload();
            alert('Data Deleted');
            }, 2000);
    },
    error: function(xhr, status, error) {
        setTimeout(function(){
            $('#confirmModal').modal('hide');
            $('#employee_table').DataTable().ajax.reload();
            alert('Data Not Deleted');
            }, 2000);
    },
    })
});

Laravel路由 #

Route::get('/admin/employees/destroy/{id}', [EmployeeController::class, 'destroy']);

控制器方法 #

public function destroy($id)
{
    $data = Employee::findOrFail($id);
    $data->delete();
}

问题定位与修复方案 #

1. HTTP请求方法错误 #

删除操作不符合REST规范，且Laravel默认对修改类操作要求CSRF验证，当前使用GET请求会触发验证失败：

• 修改路由为DELETE方法：

  Route::delete('/admin/employees/destroy/{id}', [EmployeeController::class, 'destroy']);
  

• Ajax请求中指定DELETE类型，并携带CSRF令牌：

  $.ajax({
      url: "/admin/employees/destroy/"+employee_id,
      type: "DELETE",
      headers: {
          'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
      },
      beforeSend:function(){
          $('#ok_button').text('Deleting...');
      },
      // 其余回调代码...
  });
  

• 确保页面头部已添加CSRF meta标签：

  <meta name="csrf-token" content="{{ csrf_token() }}">
  

2. 控制器未返回响应 #

当前destroy方法没有返回任何数据，Ajax无法判断请求状态，默认进入error回调：

• 修改控制器返回JSON响应：

  public function destroy($id)
  {
      $data = Employee::findOrFail($id);
      $data->delete();
      return response()->json(['success' => '数据删除成功']);
  }
  

3. setTimeout执行顺序问题 #

alert会阻塞JS线程，导致模态框延迟隐藏的效果被覆盖，调整执行顺序或替换为非阻塞提示：

• 调整顺序（先隐藏模态框再延迟弹出提示）：

  success:function(data)
  {
      $('#confirmModal').modal('hide');
      $('#employee_table').DataTable().ajax.reload();
      setTimeout(function(){
          alert('Data Deleted');
      }, 2000);
  },
  error: function(xhr, status, error) {
      $('#confirmModal').modal('hide');
      $('#employee_table').DataTable().ajax.reload();
      setTimeout(function(){
          alert('Data Not Deleted');
      }, 2000);
  }
  

• 推荐使用Bootstrap Toast替代alert（无阻塞）：

  <div class="toast position-fixed bottom-0 end-0 m-3" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
          <strong class="me-auto">操作提示</strong>
          <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body" id="toast-content"></div>
  </div>
  

  // 成功回调
  $('#toast-content').text('Data Deleted');
  $('.toast').toast('show');
  // 失败回调
  $('#toast-content').text('Data Not Deleted');
  $('.toast').toast('show');
  

4. 脚本语法错误 #

原脚本末尾多了一个多余的});，会导致JS执行报错，检查并移除该闭合括号。

内容的提问来源于stack exchange，提问作者Illia