Laravel中AJAX提交表单出现419/500错误如何解决？

需求场景 #

在Laravel框架中创建表单，通过onsubmit事件使用AJAX提交数据至数据库，同时实现无页面跳转效果。

jQuery代码 #

jQuery(function() {
$("#save").on("submit",function(event){
    var formData = {
        name: $("#name").val(),
        size: $("#email").val()
    };
    if($("#id").length != 0)
        formData['id'] = $("#id").val();
    $.ajax({
        type:"POST",
        headers: {'X-CSRF-TOKEN': $('input[name="_token"]').val()},
        url: "/drawingSave",
        data: formData,
        dataType:"json",
        encode:true,
    }).done(function(data){
        console.log(data.data['name']); // 打印name验证是否成功
    });
    event.preventDefault();
});
$("[data-toggle='popover']").popover();
});

表单代码 #

<form id="save" method="POST">
    @csrf
    <input oninput="ChangeInput(this.value)" value="{{$data['name'] ?? 'canvas'}}" type="text" name="name" id="name">
    <input type="hidden" name="size" id="size" value="{{$data['size']}}">
    @isset($data['id'])
    <input type="hidden" name="id" id="id" value="{{$data['id']}}">
    @endisset
    <button type="submit">Save</button>
    <button type="submit">Save</button>
</form>

路由代码 #

Route::post('drawingSave',[DrawingController::class,'save']);

控制器方法代码 #

public function save(Request $request){

 $data = $request->all();
// 检查绘图记录是否存在
if(is_null($request->id))
{
    $data['users_id'] = Auth::id();
    $check = $this->create($data); // 不存在则创建新的Drawing模型
}
else
{
    $check = Drawing::where('id','=',$data['id'])->update([
        'name' => $data['name'],
        'canvas_size' => $data['size'] 
    ]); // 存在则更新现有记录
}
return response()->json([
    'data' => $data
]);;
}

问题排查与解决过程 #

1. 初始419错误
   首次提交时触发419状态码，这是Laravel的CSRF令牌验证失败导致的，通过在AJAX请求头中添加X-CSRF-TOKEN，并获取页面中@csrf生成的令牌值，解决了该问题。

2. 添加CSRF头后出现500错误
   修正CSRF问题后出现500服务器内部错误，排查后发现是jQuery代码中的拼写错误：size: $("#email").val()，表单中并没有id为email的输入框，正确写法应为$("#size").val()，修正该拼写错误后，表单提交功能正常实现。

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