点击确认删除按钮后记录未删除 jQuery代码问题求助

你写的代码有三个核心问题导致删除不生效：

• 异步逻辑时序错误：SweetAlert确认弹窗是异步交互，你在点击按钮第一时间就调用event.preventDefault()拦截了a标签的默认跳转，而弹窗点击确认后的return true是回调函数的内部返回值，和外层a标签的点击事件完全无关，点击确认后根本不会触发跳转请求。
• 请求方式不匹配：Laravel资源路由的destroy方法默认只接受DELETE请求，a标签直接跳转是GET请求，就算跳转成功也会返回405方法不允许错误，根本进不到删除逻辑。
• 隐性校验问题：Laravel的写操作请求必须携带CSRF令牌，直接发起非GET请求会返回419页面过期错误。

1. 先在页面公共头部加上CSRF元标签，同时修改删除按钮的写法，不要把删除地址直接放在href属性里避免误触：

<!-- 放到页面head公共区域 -->
<meta name="csrf-token" content="{{ csrf_token() }}">

<!-- 删除按钮代码 -->
<a href="javascript:void(0)" 
   data-delete-url="{{ route('room.destroy', $value->id) }}" 
   class="btn bg-primary-light px-3 me-2 py-2 delete-btn">
   <i class='bx bx-trash'></i>
</a>

2. 替换原来的roomFunction逻辑，给删除按钮绑定事件，用户点击确认后主动发起DELETE AJAX请求执行删除：

// 全局配置AJAX自动携带CSRF令牌
$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});

// 绑定删除按钮点击事件
$('.delete-btn').on('click', function(e) {
  e.preventDefault();
  const targetUrl = $(this).data('delete-url');

  swal({
    title: "Are you sure?",
    text: "You won't be able to revert this!",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#4fa7f3",
    confirmButtonText: "Yes, delete it!",
    cancelButtonText: "No, cancel please!",
    closeOnConfirm: false,
    closeOnCancel: false
  },
  function(isConfirm) {
    if (isConfirm) {
      // 确认后主动发DELETE请求
      $.ajax({
        url: targetUrl,
        type: 'DELETE',
        success: function() {
          swal("Deleted!", "The record has been deleted.", "success");
          // 删除成功后刷新页面或者移除对应列表项即可
          setTimeout(() => window.location.reload(), 1500);
        },
        error: function() {
          swal("Failed!", "Delete failed, please try again later.", "error");
        }
      });
    } else {
      swal("Cancelled", "The record is safe.", "error");
    }
  });
});

如果你不想用AJAX，也可以在确认回调里动态生成一个method为DELETE的表单提交到删除地址，效果是一样的，只是AJAX的交互体验更流畅。

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