极客观点
项目管理
HarmonyOS
在使用laravel 5.2，用jquery的ajax()提交表单，后台返回的json表单验证信息，不能显示在html中。
1、如果表单填写完整，可以成功保存到数据库;
2、如果表单没填写完整，后台返回表单验证信息，在谷歌Chrome调试器的Preview和Response标签中，可以看到json信息，如下：
{
"title":["The title field is required."],
"content":["The content field is required."],
...
}3、这个信息不能显示在html中；
4、div class="alert alert-success"在点击提交后，总是会取消隐藏出现，即便表单因为没填写完整而提交失败。
ps：关于第4点，我感觉对jquery的ajax()里面的done()和fail()理解有问题，这里done()和fail()不是后台验证成功，而是ajax请求成功，所以不管有没有提交成功，但ajax请求是发送成功了的，所以.alert-success才会出现。那么，如果这样，要怎么改写代码？
代码如下：
View:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="csrf-token" content="{{ csrf_token() }}">
<link href="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdn.bootcss.com/tether/1.1.1/css/tether.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
<form id="formArticle" class="form-horizontal" role="form">
<fieldset class="row form-group">
<label class="col-xs-2 control-label">Title:</label>
<div class="col-xs-10">
<input id="title" name="title" type="text" class="form-control"
value="{{ old('title') }}">
<span class="help-block"><strong></strong></span>
</div>
</fieldset>
<fieldset class="row form-group">
<label class="col-xs-2 control-label">Content:</label>
<div class="col-xs-10">
<input id="content" name="content" type="text" class="form-control"
value="{{ old('content') }}">
<span class="help-block"><strong></strong></span>
</div>
</fieldset>
<fieldset class="row form-group">
<label class="col-xs-2 control-label" for="photo">Photo：</label>
<div class="col-xs-10">
<input id="photo" name="photo" type="file" class="form-control-file">
<span class="help-block"><strong></strong></span>
</div>
</fieldset>
<fieldset class="form-group">
<div class="col-xs-12">
<button id="submit" type="submit" class="btn btn-primary">Submit</button>
</div>
</fieldset>
</form>
<div class="alert alert-success" role="alert" hidden>
上传成功
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/tether/1.1.1/js/tether.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js"></script>
</body>
</html>
Javascript:
<script>
$(function () {
var articleData = new FormData($('#formArticle')[0]);
$(document).on('submit', '#formArticle', function (e) {
e.preventDefault();
$('input+span>strong').text('');
$('input').parent().parent().removeClass('has-error');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
type: "POST",
url: "{{ url('article/') }}",
dataType: 'json',
processData: false,
contentType: false,
cache: false,
data: articleData
})
.done(function (data) {
$(".alert-success").prop("hidden", false);
})
.fail(function (data) {
$.each(data.responseJSON, function (key, value) {
var input = '#formArticle input[name=' + key + ']';
$(input + '+span>strong').text(value);
$(input).parent().parent().addClass('has-error');
});
});
});
});
</script>Controller:
public function store(Requests\StoreArticleRequest $request)
{
$article = new Article;
$article -> user_id = \Auth::id();
$article->title = $request->title;
$article->content = $request->content;
$photo = $request->photo;
$destinationPath = 'uploads/';
$extension = $photo->getClientOriginalExtension();
$photoName = \Auth::user()->id . '_' . time() . '.' . $extension;
$photo->move($destinationPath, $photoName);
$article -> photo = '/'.$destinationPath.$photoName;
$article->save();
}StoreArticleRequest:
public function rules()
{
return [
'title'=>'required',
'content'=>'required',
'photo'=>'required'
];
}
