Laravel API返回的JSON错误信息如何在Blade模板中展示

问题背景 #

我用Laravel开发REST API，之前做表单验证时，控制器里通过return back()->withErrors()把错误传递给Blade模板，借助Session和$errors变量实现错误展示。但现在API验证失败会返回JSON格式的错误信息，无法再用Session机制在Blade里展示错误，需要解决这个问题。

原表单验证代码（同步提交） #

$rules = [
    'receptor' => 'required',
    'accion' => 'required',
    'state' => 'required',
    'fech_ini' => 'required',
    'fech_fin' => 'required',
];
$message = [
    'receptor.required' => 'Receiver is Required',
    'accion.required' => 'Acción is Required',
    'state.required' => 'State is Required',
    'fech_ini.required' => 'Start Date is Required',
    'fech_fin.required' => 'End Date is Required',
];
$validator = Validator::make($request->all(), $rules,$message);
if($validator->fails()):
    return back()->withErrors($validator)->with('message','An error has occurred:')->with('typealert','danger')->withInput();
else:
   // 保存逻辑
endif;

原Blade错误展示代码 #

<div class="social_media">
  @if (Session::has('message'))
    <div class="container mt-3">
      <div class="alert alert-{{ Session::get('typealert') }}" style="display:none;text-align: left;">
        {{ Session::get('message') }}
        @if ($errors->any())
          <ul>
            @foreach ($errors->all() as $error)
              <li>{{ $error }}</li>
            @endforeach
          </ul>
        @endif
        <script>
          $('.alert').slideDown();
          setTimeout(function(){ $('.alert').slideUp(); }, 10000)
        </script>
      </div>
    </div>
  @endif
</div>

现有API验证代码（返回JSON） #

$rules = [
    'receptor' => 'required',
    'accion' => 'required',
    'state' => 'required',
    'fech_ini' => 'required',
    'fech_fin' => 'required',
];
$message = [
    'receptor.required' => 'Receiver is Required',
    'accion.required' => 'Acción is Required',
    'state.required' => 'State is Required',
    'fech_ini.required' => 'Start Date is Required',
    'fech_fin.required' => 'End Date is Required',
];
$validator = Validator::make($request->all(), $rules,$message);
if($validator->fails()):
    return response()->json([
      'validator'=> $validator,
      'message'=> 'An error has occurred',
      'typealert' => 'danger',
    ]);
else:
   // 保存逻辑
endif;

解决方案 #

1. 修正API错误返回格式 #

直接返回$validator对象会包含冗余数据，应该返回格式化后的错误数组，同时使用标准HTTP状态码区分结果：

$rules = [
    'receptor' => 'required',
    'accion' => 'required',
    'state' => 'required',
    'fech_ini' => 'required',
    'fech_fin' => 'required',
];
$message = [
    'receptor.required' => 'Receiver is Required',
    'accion.required' => 'Acción is Required',
    'state.required' => 'State is Required',
    'fech_ini.required' => 'Start Date is Required',
    'fech_fin.required' => 'End Date is Required',
];
$validator = Validator::make($request->all(), $rules,$message);
if($validator->fails()):
    return response()->json([
        'errors' => $validator->errors()->all(), // 提取所有错误消息
        'message'=> 'An error has occurred',
        'typealert' => 'danger',
    ], 422); // 422是验证失败的标准HTTP状态码
else:
   // 保存逻辑
   return response()->json(['message' => 'Operation successful'], 200);
endif;

2. 前端异步提交与动态错误展示 #

改用AJAX异步提交表单，接收JSON响应后动态渲染错误提示，不再依赖Session：

<!-- 表单部分 -->
<form id="api-form" method="POST">
    @csrf
    <input type="text" name="receptor" placeholder="Receiver">
    <input type="text" name="accion" placeholder="Acción">
    <input type="text" name="state" placeholder="State">
    <input type="date" name="fech_ini" placeholder="Start Date">
    <input type="date" name="fech_fin" placeholder="End Date">
    <button type="submit">Submit</button>
</form>

<!-- 错误/成功提示容器 -->
<div class="social_media">
    <div id="alert-container" class="container mt-3"></div>
</div>

<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<script>
$(document).ready(function() {
    $('#api-form').on('submit', function(e) {
        e.preventDefault(); // 阻止默认同步提交
        $('#alert-container').empty(); // 清空旧提示

        $.ajax({
            url: '/your-api-endpoint', // 替换为实际API路由
            method: 'POST',
            data: $(this).serialize(),
            dataType: 'json',
            success: function(res) {
                // 渲染成功提示
                let alertHtml = `
                    <div class="alert alert-success" style="display:none;text-align: left;">
                        ${res.message}
                        <script>
                            $('.alert').slideDown();
                            setTimeout(() => $('.alert').slideUp(), 10000);
                        </script>
                    </div>
                `;
                $('#alert-container').html(alertHtml);
            },
            error: function(xhr) {
                if (xhr.status === 422) {
                    let res = xhr.responseJSON;
                    // 构建错误列表
                    let errorList = res.errors.length > 0 ? '<ul>' : '';
                    res.errors.forEach(err => errorList += `<li>${err}</li>`);
                    errorList += res.errors.length > 0 ? '</ul>' : '';
                    
                    // 渲染错误提示
                    let alertHtml = `
                        <div class="alert alert-${res.typealert}" style="display:none;text-align: left;">
                            ${res.message}
                            ${errorList}
                            <script>
                                $('.alert').slideDown();
                                setTimeout(() => $('.alert').slideUp(), 10000);
                            </script>
                        </div>
                    `;
                    $('#alert-container').html(alertHtml);
                }
            }
        });
    });
});
</script>

3. 补充说明 #

• 用HTTP状态码区分结果：验证失败返回422，成功返回200，前端可快速判断处理逻辑
• 不再依赖Session和$errors变量，所有提示通过JS动态生成，适配API交互场景
• 若不使用jQuery，可改用原生JS的fetch API实现，逻辑完全一致

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