Laravel API返回422状态码时Ajax无法在Blade页渲染验证错误

在Laravel中开发API接口时遇到如下问题：接口返回带HTTP状态码的响应时，验证错误信息无法正常渲染到页面。可以在浏览器Network面板中查看到接口返回的验证错误内容，但只要接口返回错误状态码，控制台就会打印报错，无法将验证错误信息输出到Blade页面；如果接口不返回错误状态码，则可以正常打印验证错误信息。

相关代码 #

控制器代码 StudentController #

public function store(Request $request): object
{
    $validate = Validator::make($request->all(),[
        'name' => 'required',
        'course' => 'required',          
    ]);
    $data = [
        'name' => $request->name,
        'course' => $request->course,           
    ];
    if ($validate->fails()){
        return response()->json(['success' => false, 'errors' => $validate->messages()->all()],422);
    }
    Student::insert($data);
    return response()->json(['success' => true, 'message' => "Registration Successful"]);
}

前端AJAX代码 #

$(document).ready(function (){
   $('#createBtn').on('click',function (e) {
      e.preventDefault();
      let form = $('#student-add').serialize();

      $.ajax({
         'url': "{{ route('students.store') }}",
         'data': form,
         'type': "POST",
         success:function (result) {
             $('#ajax-validate ul').text("");
          if(result.success === true){
              console.log("True");
          }else {
              result.errors.forEach(function (item) {
                  $('#ajax-validate ul').append('<li>'+item+'</li>');
              });
          }
         }
      });
   });
});

问题截图 #

• 控制台报错：
• 网络面板响应：

jQuery的$.ajax默认规则是：仅当响应HTTP状态码为2xx系列时才会触发success回调。代码中校验失败返回的422状态码属于客户端错误类状态码，会直接触发error回调，根本不会进入已编写的success逻辑，因此控制台会报请求错误，页面也无法拿到错误内容完成渲染。

给AJAX请求新增error回调，专门处理422等错误状态的响应即可，修改后的AJAX代码如下：

$(document).ready(function (){
   $('#createBtn').on('click',function (e) {
      e.preventDefault();
      let form = $('#student-add').serialize();

      $.ajax({
         'url': "{{ route('students.store') }}",
         'data': form,
         'type': "POST",
         success:function (result) {
             $('#ajax-validate ul').empty();
             console.log("True");
             // 2xx状态码对应请求成功，无需在此处处理success=false的分支
         },
         error:function(xhr){
             $('#ajax-validate ul').empty();
             // 422校验失败的响应内容存储在xhr.responseJSON中
             if(xhr.status === 422){
                 let errors = xhr.responseJSON.errors;
                 errors.forEach(function (item) {
                     $('#ajax-validate ul').append('<li>'+item+'</li>');
                 });
             }
         }
      });
   });
});

补充：如果不想拆分success和error回调，也可以通过配置$.ajax的statusCode参数单独处理422状态，不过按照HTTP语义拆分成功、失败回调处理对应逻辑是更规范的写法。

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