laravel 5 验证 ajax 在 javascript 中呈现错误响应以在视图中显示错误答案

【问题标题】：laravel 5 validation ajax rendering error response in javascript to show error in viewlaravel 5 验证 ajax 在 javascript 中呈现错误响应以在视图中显示错误
【发布时间】：2018-02-23 03:45:37
【问题描述】：

我有一个表单验证来验证我将数据添加到数据库中。我是使用 ajax/javascript 的初学者。我如何使用 ajax 在我的视图中显示错误。

我已经通过这段代码从 ajax 返回了 json：

if ($validator->fails()) {    
             return response()->json(['errors' => $validator->messages(), 'status' => 422], 200);
}

在我看来，我有这个：

<div class="row">
   <div class="col-lg-12 col-md-12 col-sm-12 {{ $errors->has('catname') ? ' has-error' : '' }}" style="padding-bottom: 10px;">
        <input class="form-control" name="catname" placeholder="Category name" type="text" required />
        @if ($errors->has('catname'))
          <span class="help-block">
         <strong>{{ $errors->first('catname') }}</strong>
              </span>
        @endif
    </div>
</div>

如何返回错误以使我的输入类型显示错误。

这是我的 ajax。

function addCategoryAjax(e) {
    e.preventDefault();

    $.ajax({         
        url: "{{ route('admin.addcat') }}",        
        type: "POST",
        data: $("#frmAddcategory").serialize(),
        dataType: "JSON",
        success: function(data) {
           if(data.status == 422) {
             for (var error in data.errors) {
                $('.errors').append(data.errors[error] + '<br>');
              }
           }
        }
    }); 
}

【问题讨论】：

chrome => 开发者工具 => 网络
@AnarBayramov 非常感谢您的回复。你好先生，我在我的网络响应中得到了这个：JSON catname [1] 0 类别已经存在。我该如何做 javascript 以将其传递给我的视图？
ajax 调用 laravel 路由 -> laravel 路由 -> 控制器 -> 视图
我要求在我的视图中传递 javascript。因为我不知道如何使用javascript返回它
您的错误 div 在哪里？并且您需要将每个错误附加为 html 元素，例如 $('.errors').append("<p>". data.errors[error] ."</p> ");

标签： javascript jquery ajax laravel-5.4 laravel-validation

【解决方案1】：

function addCategoryAjax(e) {
e.preventDefault();

$.ajax({         
    url: "{{ route('admin.addcat') }}",        
    type: "POST",
    data: $("#frmAddcategory").serialize(),
    dataType: "JSON",
    success: function(data) {
       //if success
       console.log(data);
       alert('success');
    },
    error: function(data){
      //if error
      if(data.responseJSON == 422) {
         $('.errors').html('');
         for (var error in data.responseJSON) {
            $('.errors').append(data.responseJSON[error] + '<br>');
          }
       }
    }
}); 
}

【讨论】：