Laravel页面多Ajax调用：如何让表单使用指定POST类型Ajax提交？

你的问题核心出在这行代码：document.getElementById("testForm").submit() —— 这行代码会触发表单的默认提交行为，直接绕过你写的POST类型Ajax请求，甚至会因为默认提交的动作干扰页面逻辑，误触发第一个GET请求。

具体修复步骤 #

1. 移除多余的默认提交代码
   删掉document.getElementById("testForm").submit()，它完全没必要，反而会打断你的Ajax流程。

2. 添加Laravel必需的CSRF令牌
   Laravel会拦截没有CSRF令牌的POST请求，你需要在Ajax中带上令牌，两种方式任选其一：

   • 方式一：直接拼接到表单序列化数据中

     data: $('#testForm').serialize() + '&_token=' + $('meta[name="csrf-token"]').attr('content'),
     

   • 方式二：设置全局Ajax请求头（适合页面内多个Ajax请求的场景）

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

3. 规范表单提交逻辑（可选）
   如果表单是通过点击提交按钮触发的，建议直接监听表单的submit事件，阻止默认行为后执行Ajax，逻辑更清晰：

调整后的完整代码示例 #

$.ajax({  //First Ajax
    type: "GET",
    url: "/course/digital-marketing/facebook/fetch",       
    success: function (data) {
        // 监听表单提交事件
        $('#testForm').on('submit', function(e) {
            e.preventDefault(); // 阻止默认提交行为，避免误触发其他请求
            
            $.ajax({//Second Ajax
                data: $(this).serialize(),
                url: "/course/digital-marketing/facebook",
                type: "POST",
                dataType: 'json',
                // 带上CSRF令牌
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                success: function (data) {
                    console.log('Success:', data);
                },
                error: function (data) {
                    console.log('Error:', data);
                }
            });
        });

        // 如果需要页面加载后自动触发表单提交，取消下面注释即可
        // $('#testForm').trigger('submit');
    }
});

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