如何在Laravel中使用AJAX序列化表单并将数据保存到数据库

核心错误点 #

• 对FormData实例调用jQuery的serialize()方法是完全错误的用法，serialize()仅作用于jQuery选中的表单DOM元素，对FormData调用该方法只会返回空值，这就是你提交字段为空的核心原因。
• 使用FormData提交AJAX请求时，必须添加processData: false和contentType: false两个配置项，否则jQuery会默认自动处理数据、设置请求头，导致后端无法正常解析参数。
• Blade模板中的表单标签未正确闭合，最后一行的<form>应改为</form>。
• 额外注意：请确认你的Job模型中已经将post_title、history加入$fillable可批量赋值属性，否则create方法会自动过滤这两个字段，也会导致入库为空。

修正方案 #

你可以任选以下两种方案中的一种即可：

方案1：使用FormData提交（适合包含文件上传的场景） #

修正后的JS代码如下：

$(document).ready(function () {
    $('#btn-job-submit').on('click', function (event) {
        event.preventDefault();
        var formData = new FormData($('#form-job-store')[0]);
        let url = $('#form-job-store input[name="url"]').val();
        $.ajax({
            type: 'POST',
            url: url,
            data: formData,
            // 必须添加以下两个配置
            processData: false,
            contentType: false,
            success: function (data) {
                alert('保存成功');
                console.log(data);
            },
            error: function (err) {
                alert('保存失败，请检查参数');
                console.error(err);
            }
        });
    });
});

方案2：直接序列化表单提交（适合普通文本字段场景，代码更简洁） #

如果你的表单没有文件上传需求，可以不用生成FormData，直接序列化表单提交即可：

$(document).ready(function () {
    $('#btn-job-submit').on('click', function (event) {
        event.preventDefault();
        let url = $('#form-job-store input[name="url"]').val();
        $.ajax({
            type: 'POST',
            url: url,
            data: $('#form-job-store').serialize(),
            success: function (data) {
                alert('保存成功');
                console.log(data);
            },
            error: function (err) {
                alert('保存失败，请检查参数');
                console.error(err);
            }
        });
    });
});

模型补充配置 #

请在app/Models/Job.php中添加可批量赋值配置：

// 允许批量赋值的字段
protected $fillable = ['user_id', 'post_title', 'history'];

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