Laravel框架下如何通过AJAX POST提交表单选中的下拉选项值

优先排查前端常见错误 #

1. AJAX回调函数拼写错误
   你原有代码中回调字段写的是sucess，属于拼写错误，正确拼写为success，该错误会导致你无法正常获取接口返回结果，无法定位问题。同时建议新增error回调，方便排查接口报错信息。
2. 下拉框取值异常排查
   你使用的下拉框类包含js-example-basic-single，是Select2插件的默认初始化类，若你已引入Select2插件，需要先确保下拉框初始化完成，取值可以使用Select2提供的专用方法，兼容性更好。
   你可以在构造data对象后加一行console.log(data)，打印查看District_id是否正常返回对应选中值，若为空则是前端取值问题，若有值则问题出在后端逻辑。

修正后的前端代码 #

<script>
$(document).ready(function () {
    // 确认Select2初始化代码存在，没有使用Select2可删除该行
    $('.js-example-basic-single').select2();

    $(document).on('click', '.add_estate', function(e) {
        e.preventDefault();
        // 方式1：逐个获取字段值
        var data = {
            'Estate_name': $('.Estate_name').val(),
            'Landlord': $('.Landlord').val(),
            'District_id': $('.District_id').val(),
            // 用Select2的情况可以替换为下行取值
            // 'District_id': $('.District_id').select2('val'),
        }
        // 打印确认字段值是否正常
        console.log(data);

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

        $.ajax({
            type: "POST",
            url:"/register/estate",
            data: data,
            dataType: "json",
            // 修正拼写错误
            success: function (response) {
                console.log('提交成功', response); 
            },
            // 新增错误回调，方便定位问题
            error: function (err) {
                console.log('提交报错', err.responseJSON);
            }
        });
    });
});
</script>

你也可以用FormData自动收集表单所有字段，避免手动写漏字段：

<script>
$(document).ready(function () {
    $('.js-example-basic-single').select2();

    $(document).on('click', '.add_estate', function(e) {
        e.preventDefault();
        // 方式2：FormData自动收集所有表单字段
        var form = $('.forms')[0];
        var data = new FormData(form);

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

        $.ajax({
            type: "POST",
            url:"/register/estate",
            data: data,
            dataType: "json",
            // FormData提交必须加以下两个配置
            contentType: false,
            processData: false,
            success: function (response) {
                console.log('提交成功', response); 
            },
            error: function (err) {
                console.log('提交报错', err.responseJSON);
            }
        });
    });
});
</script>

后端配置确认 #

如果前端打印District_id有值，但还是无法存入数据库，检查以下后端配置：

1. 路由确认
   确保routes/web.php中存在对应POST路由：

use App\Http\Controllers\EstateController;
Route::post('/register/estate', [EstateController::class, 'store']);

2. 控制器验证逻辑确认
   确保app/Http/Controllers/EstateController.php的store方法包含District_id验证：

public function store(Request $request)
{
    $validated = $request->validate([
        'Estate_name' => 'required|string|max:255',
        'Landlord' => 'required|string|max:255',
        'District_id' => 'required|exists:districts,id', // districts替换为你实际的区域表名
    ]);
    // 存入数据库
    \App\Models\Estate::create($validated);
    return response()->json(['status' => 'success', 'msg' => '添加成功']);
}

3. 模型批量赋值配置确认
   确保app/Models/Estate.php的$fillable属性中包含District_id，否则Laravel批量赋值会自动过滤该字段：

protected $fillable = [
    'Estate_name',
    'Landlord',
    'District_id', // 必须添加该字段
];

内容的提问来源于stack exchange，提问作者MATOVU JOEL CLINTON