Laravel中发送Form Data时Ajax Success回调失效问题排查

我设置了一个绑定onclick事件的按钮，点击后调用sendCode函数，该函数将Form Data作为请求数据发送至后端，但目前Ajax的success回调无法正常执行。请问我的代码存在什么问题？

sendCode函数代码： #

const sendCode = () => {
    // Get content
    let lang = $("#lang").val()
    let code = editor.getValue()
    let input = document.getElementById("input").value

    var codeBlob = new Blob([code], {
        type: "text/plain;charset=utf-8"
    });

    var inputBlob = new Blob([input], {
        type: "text/plain;charset=utf-8"
    });

    var formData = new FormData()
    formData.append('input', inputBlob)
    formData.append('code', codeBlob)
    formData.append('lang', lang)

    $.ajax({
        type: 'POST',
        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
        processData: false,
        contentType: false,
        cache: false,
        async: false,
        data: formData,
        url: '{{ route("pemain.contest.prg.question.runcode", ['contest' => $contest->slug, 'question' => $question->id]) }}',
        enctype: 'multipart/form-data',
        success: function(response) {
           changeOutput()
        }, 
    })
}

changeOutput函数代码： #

const changeOutput = () => {
    let username = "{{Auth::user()->team->user->username}}"
    let path = "/storage/prg/pemain/"+username+"/result.out"
    file_get_contents(path)
}

问题分析与修复方案： #

1. 同步请求导致的异常 #

你设置了async: false，将Ajax请求改为同步模式。现代浏览器已逐步废弃同步XMLHttpRequest，这种模式会阻塞页面线程，还可能导致回调逻辑执行异常。建议删除该配置（默认就是async: true），改用异步请求。

2. 未处理请求错误 #

success回调仅在后端返回2xx状态码时触发，如果请求返回4xx/5xx错误，会直接跳过success，但你没有配置error回调，无法排查失败原因。添加error回调可以快速定位问题：

$.ajax({
    // 原有配置...
    success: function(response) {
       changeOutput()
    },
    error: function(xhr, status, err) {
        console.log("请求失败状态:", status);
        console.log("错误信息:", err);
        console.log("后端响应:", xhr.responseText);
    }
})

3. changeOutput函数中的致命错误 #

file_get_contents是PHP的服务端函数，不能在JavaScript中直接调用，这会直接抛出语法错误，导致success回调执行中断。需要改用Ajax请求获取文件内容：

const changeOutput = () => {
    let username = "{{Auth::user()->team->user->username}}"
    let path = "/storage/prg/pemain/"+username+"/result.out"
    // 用jQuery异步获取输出文件
    $.get(path)
        .done(function(outputContent) {
            // 这里将内容展示到页面，比如：
            // $("#output-area").text(outputContent);
            console.log("输出内容:", outputContent);
        })
        .fail(function() {
            console.log("获取输出文件失败，请检查路径是否正确");
        });
}

4. 不必要的Blob对象使用 #

你把普通字符串（code和input）转成Blob再添加到FormData是完全多余的，FormData可以直接接收字符串类型的参数，简化代码：

// 替换原有Blob相关代码
var formData = new FormData()
formData.append('input', input)
formData.append('code', code)
formData.append('lang', lang)

5. 验证Blade生成的URL有效性 #

确保页面渲染后，{{ route(...) }}已经生成了正确的后端接口URL。可以在浏览器控制台查看sendCode函数的源码，确认URL是否符合预期，如果URL无效，请求会直接失败，success回调不会触发。

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