如何解决JavaScript Fetch向Laravel控制器传表单数据失败问题及Ajax示例

一、Fetch代码的问题分析与修复 #

问题根源 #

当前Fetch代码存在两个核心问题：

1. FormData序列化错误：将FormData实例放入普通对象后用JSON.stringify序列化，FormData是特殊的表单数据对象，无法被JSON正确序列化，导致控制器接收不到有效数据。
2. 请求头与数据格式不匹配：手动设置Content-Type: application/json后，Laravel期望接收JSON格式的请求体，但你的数据结构不符合要求，且phone[]这类数组参数无法被正确解析。

修复后的Fetch代码 #

function verify_code(formId) {
    event.preventDefault();
    const form = document.getElementById(formId);
    let formData = new FormData(form);

    // 注：@csrf指令已自动生成名为_token的隐藏输入框，FormData会自动包含该字段，无需手动追加

    const options = {
        method: "POST",
        body: formData
        // 无需手动设置Content-Type，浏览器会自动为FormData添加正确的multipart/form-data请求头
    };

    fetch(form.action, options)
        .then(response => {
            if (response.ok) {
                return response.json();
            }
            throw new Error(`请求错误：${response.status}`);
        })
        .then(data => {
            console.log("成功：", data);
        })
        .catch(error => {
            console.log(error);
        });
}

Laravel控制器接收数据示例 #

use Illuminate\Http\Request;

public function verifyAccount(Request $request)
{
    // 验证OTP输入的合法性
    $validated = $request->validate([
        'phone' => 'required|array|size:6',
        'phone.*' => 'required|numeric|digits:1'
    ]);

    // 将数组形式的OTP拼接为完整字符串
    $otpCode = implode('', $validated['phone']);

    // 执行后续的账号验证逻辑...

    return response()->json([
        'message' => 'OTP验证成功',
        'otp' => $otpCode
    ]);
}

二、Ajax（jQuery）实现示例 #

方式1：使用表单序列化（适合普通表单数据） #

function verify_code(formId) {
    event.preventDefault();
    const $form = $('#' + formId);

    $.ajax({
        url: $form.attr('action'),
        method: 'POST',
        data: $form.serialize(), // 自动序列化表单数据，包括phone[]数组
        dataType: 'json',
        success: function(data) {
            console.log("成功：", data);
        },
        error: function(xhr, status, error) {
            console.log(`请求错误：${error}`);
        }
    });
}

方式2：使用FormData（适合包含文件上传的场景，当前表单也适用） #

function verify_code(formId) {
    event.preventDefault();
    const form = document.getElementById(formId);
    const formData = new FormData(form);

    $.ajax({
        url: form.action,
        method: 'POST',
        data: formData,
        processData: false, // 禁止jQuery处理FormData对象
        contentType: false, // 禁止jQuery自动设置请求头，由浏览器处理
        dataType: 'json',
        success: function(data) {
            console.log("成功：", data);
        },
        error: function(xhr, status, error) {
            console.log(`请求错误：${error}`);
        }
    });
}

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