Laravel中Bootstrap模态框结合Ajax提交数据无响应问题排查

1. 表单提交按钮未触发submit事件 #

模态框内的「Sauvegarder」按钮类型为type="button"，这类按钮不会触发表单的submit事件，导致绑定的Ajax代码完全未执行。

修复：将按钮类型修改为submit：

<button type="submit" class="btn btn-primary">Sauvegarder</button>

2. 模型$fillable字段存在空格错误 #

Service模型中note_service字段后方多了一个空格：

protected $fillable = ['intitule_service', 'note_service '];

这个空格会被Laravel识别为错误字段名，引发赋值或保存失败。

修复：删除多余空格：

protected $fillable = ['intitule_service', 'note_service'];

3. 控制器未返回响应 #

store方法仅执行保存操作，未向Ajax请求返回任何响应，会导致Ajax进入error回调，即使数据保存成功，前端仍会弹出错误提示。

修复：添加JSON响应返回：

public function store(Request $request)
{
    $service = new Service();
    $service->intitule_service = $request->input('intitule_service');
    $service->note_service = $request->input('note_service');
    $service->save();

    return response()->json(['success' => true, 'message' => 'Service sauvegardé']);
}

4. 可选优化：表单CSRF写法规范 #

虽然{{ csrf_field() }}可用，Laravel推荐使用更简洁的@csrf Blade指令：

@csrf

5. 路由兼容性（Laravel 8+） #

若使用Laravel 8及以上版本，旧路由写法会失效，需调整为：

use App\Http\Controllers\ServiceController;
Route::post('/serviceadd', [ServiceController::class, 'store']);

测试建议 #

1. 修复后打开浏览器开发者工具（F12），切换到「控制台」和「网络」标签，点击提交按钮，查看Ajax请求是否发送、响应内容是否正常。
2. 检查数据库是否有数据插入，结合控制台日志定位剩余问题。

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