外部JS文件中Ajax调用失效且重复请求问题求助

1. 修复CSRF令牌解析问题（外部JS无法识别Blade语法） #

外部JS文件不会经过Laravel Blade引擎渲染，{{ csrf_token() }}会被当作普通字符串直接发送，导致请求缺少有效CSRF令牌而失败，修复方式如下：

步骤1：在Blade模板的<head>中添加CSRF元标签 #

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

步骤2：修改外部JS中的Ajax请求 #

去掉data里硬编码的_token字段，改用从元标签获取令牌，同时可以全局配置Ajax默认携带CSRF令牌，避免每个请求重复编写：

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

    // 绑定change事件（先解绑再绑定，防止重复绑定）
    $('.plan_sales').off('change').on('change', function() {
        var plan_status = $(this).prop('checked') ? 1 : 0;
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '/plan_status_update',
            data: {
                'plan_status': plan_status,
                'id': id
            },
            success: function(data) {
                location.reload();
            }
        });
    });
});

2. 解决重复请求问题 #

重复请求大概率是事件被多次绑定导致的，常见原因及对应解决方式：

• 检查JS文件是否重复引入：查看页面源码，确认custom.js只被引入一次（不要在主布局和子页面重复引入）。
• 使用off()解绑原有事件再绑定：上述代码中$('.plan_sales').off('change').on('change', ...)的写法，会在绑定新事件前清除之前的监听，避免同一事件被多次触发。
• 改用事件委托到静态父元素：如果.plan_sales是动态生成的元素，绑定到页面加载时就存在的静态父元素（比如document），既可以避免重复绑定，也能兼容动态生成的元素：

$(function() {
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });

    // 事件委托到document，避免重复绑定和动态元素问题
    $(document).off('change', '.plan_sales').on('change', '.plan_sales', function() {
        var plan_status = $(this).prop('checked') ? 1 : 0;
        var id = $(this).data('id');
        $.ajax({
            type: "POST",
            dataType: "json",
            url: '/plan_status_update',
            data: {
                'plan_status': plan_status,
                'id': id
            },
            success: function(data) {
                location.reload();
            }
        });
    });
});

额外检查项 #

• 确认/plan_status_update路由配置正确，且明确接受POST请求。
• 打开浏览器控制台的Network标签，查看请求的状态码和错误信息，排查是否存在其他报错导致的异常。

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