Laravel项目中AJAX请求用jQuery变量作为命名路由参数失效问题

Blade 是服务端模板引擎，所有 {{ }} 语法都会在页面返回给浏览器之前的服务端渲染阶段执行完成。而你代码中通过 jQuery 拿到的 id 是客户端运行时的 JS 变量，要等到页面加载完成、用户触发删除操作时才会生成，服务端渲染 Blade 的阶段根本感知不到这个 JS 变量的存在。
你写的 {{ route('delete.approvers', 'id') }} 里的 'id' 是你手动传入的字符串，Blade 会直接把这个字符串作为参数拼接到生成的路由中，最终输出到前端的 URL 就是固定带 /id 后缀的地址，自然不会替换成你后续拿到的数值型 id。

方法1：占位符替换（最常用） #

先让 Blade 生成带临时占位符的路由模板，JS 拿到实际 id 后再替换占位符即可：

function approverDelete(ctl) {
  var id = $(ctl).data("id");
  // 先生成带占位符的路由，Blade渲染后会得到类似 /admin/approvers/delete/REPLACE_ID 的字符串
  var deleteUrl = "{{ route('delete.approvers', 'REPLACE_ID') }}".replace('REPLACE_ID', id);
  $.ajax({
    url: deleteUrl,
    type: 'DELETE',
    // 别忘了加CSRF头，否则请求会被Laravel拦截
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (approver) {
      $(ctl).parents("tr").remove();
    },
    error: function (request, message, error) {
      handleException(request, message, error);
    }
  });
}

方法2：DOM属性预存路由 #

在 Blade 渲染删除按钮的时候，直接把对应条目的完整路由存在按钮的 data 属性里，JS 直接读取即可，不需要额外拼接：
Blade 模板部分代码：

<button onclick="approverDelete(this)" data-delete-url="{{ route('delete.approvers', $approver->id) }}">删除审批人</button>

JS 部分代码：

function approverDelete(ctl) {
  $.ajax({
    url: $(ctl).data('delete-url'),
    type: 'DELETE',
    headers: {
      'X-CSRF-TOKEN': "{{ csrf_token() }}"
    },
    success: function (approver) {
      $(ctl).parents("tr").remove();
    },
    error: function (request, message, error) {
      handleException(request, message, error);
    }
  });
}

方法3：全局路由挂载（适合JS抽离为独立文件的场景） #

如果你的 JS 代码是单独的外部文件，不能直接写 Blade 语法，可以在页面头部先把路由挂载到全局 window 对象上：
Blade 模板头部代码：

<meta name="csrf-token" content="{{ csrf_token() }}">
<script>
window.routes = {
  deleteApprover: "{{ route('delete.approvers', 'REPLACE_ID') }}"
}
// 全局配置AJAX CSRF头，不需要每个请求单独加
$.ajaxSetup({
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  }
});
</script>

外部 JS 文件代码：

function approverDelete(ctl) {
  var id = $(ctl).data("id");
  var deleteUrl = window.routes.deleteApprover.replace('REPLACE_ID', id);
  $.ajax({
    url: deleteUrl,
    type: 'DELETE',
    success: function (approver) {
      $(ctl).parents("tr").remove();
    },
    error: function (request, message, error) {
      handleException(request, message, error);
    }
  });
}

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