laravel5.8使用ajax+验证器验证实现ajax返回验证数据

2019-12-15   阅读:480   分类:后端    标签: Laravel

一、创建路由

<?php
Route::prefix("admin")->name("admin.")->group(function (){
     Route::group(['prefix'=>'article'],function(){
         Route::match(["get","post"],"/article_add","Admin\ArticleController@article_add")->name("article.article_add");
    });
});

?>


二、创建验证器:

php artisan make:request CheckArticle

添加如下代码:

<?php

namespace App\Http\Requests;

use Illuminate\Foundation\Http\FormRequest;
use Illuminate\Contracts\Validation\Validator;  //注意引入
use Illuminate\Http\Exceptions\HttpResponseException;//注意引入

class CheckArticle extends FormRequest
{
    /**
     * Determine if the user is authorized to make this request.
     *
     * @return bool
     */
    public function authorize()
    {
        return true;
    }

    /**
     * Get the validation rules that apply to the request.
     *
     * @return array
     */
    public function rules()
    {
        return [
            'title' => 'sometimes|required|max:60',
            'thumb' => 'sometimes|required',
        ];
    }
    /**
     * 获取已定义验证规则的错误消息。
     *
     * @return array
     */
    public function messages()
    {
        return [
            'title.required' => '标题不能为空',
            'title.max' => '标题长度不能超过60个字',
            'thumb.required' => '缩略图不能为空',
        ];
    }
//    ajax返回
    public function failedValidation(Validator $validator)
    {
        throw (new HttpResponseException(response()->json([
            'code' => 500,
            'msg' => $validator->errors()->first(),
        ], 200)));
    }
}


三、创建控制器

php artisan make:controller \Admin\ArticleController


<?php
   /*
        * 文章添加
     * */
    public function article_add(CheckArticle $request){
        if($request->isMethod('POST')){
            $data=$request->except('_token');
            $data['created_at']=date('Y-m-d H:i:s');
            $data['updated_at']=date('Y-m-d H:i:s');

            $res=DB::table('article')->insert($data);
            if($res==true){
                return response()->json(['code'=>200,'msg'=>'添加成功','url'=>route('admin.article.article')]);
            }else{
                return response()->json(['code'=>500,'msg'=>'添加失败']);
            }
        }
        return view('admin.article.article_add');
    }
?>


前端:

<meta name="csrf-token" content="{{ csrf_token() }}">

<form role="form" method="post" id="myForm">
	<div class="form-group">
		<label>标题</label>
		<input type="text" name="title" placeholder="标题" class="form-control" style="width: 40%;" required aria-required="true">
	</div>
	<div class="form-group">
		<label>缩略图</label>
		<div id="uploader-demo">
			<div id="fileList" class="uploader-list"></div>
			<div id="filePicker">选择图片</div>
		</div>
		<div id="show_img" style="display:none;">
			<img id="thumb_img" src="" alt="图片" height="100px" width="100px">
		</div>
		<input type="hidden" id="thumb" name="thumb">
	</div>
	<div class="form-group">
		<label>状态</label>
		<div class="radio radio-info radio-inline">
			<input type="radio" id="inlineRadio1" value="0" name="status" checked>
			<label for="inlineRadio1"> 显示 </label>
		</div>
		<div class="radio radio-info radio-inline">
				<input type="radio" id="inlineRadio2" value="1" name="status">
			<label for="inlineRadio2"> 隐藏 </label>
		</div>
	</div>
	<div class="form-group">
		<label>内容</label>
		<script id="content" type="text/plain" style="width:100%;height:500px;" name="content"></script>
	</div>
	<div>
		<button class="btn btn-sm btn-primary pull-left m-t-n-xs" type="button" onclick="save()"><strong>添加</strong>
		</button>
	</div>
</form>

js ajax代码

<script>
    function save() {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        // 获取页面已有的一个form表单
        var form = document.getElementById("myForm");
        // 用表单来初始化
        var formData = new FormData(form);

        $.ajax({

            url:"{{route('admin.article.article_add')}}",
            type:'post',
            data:formData,
            timeout:0,
            datatype:'text',
            processData: false,
            contentType: false,
            success:function(msg){
                console.log(msg)
                if(msg.code==200){
                    layer.msg(msg.msg,{icon:1,time:3000}, function() {
                        window.location.href=msg.url
                    });

                }else{
                    layer.msg(msg.msg, { icon:2});
                }
            },error:function () {
                layer.msg('网络错误', { icon:2});
            }
        });

    }
</script>


【腾讯云】11.11 云上盛惠,云产品限时抢购,1核2G云服务器首年88元

‘简忆博客’微信公众号 扫码关注‘简忆博客’微信公众号,获取最新文章动态
转载:请说明文章出处“来源简忆博客”。http://www.tpxhm.com/adetail/273.html

×
觉得文章有用就打赏一下文章作者
微信扫一扫打赏 微信扫一扫打赏
支付宝扫一扫打赏 支付宝扫一扫打赏

文章评论(0)

登录
头像

简忆博客
仕而优则学,学而优则仕。

置顶推荐

打赏本站

如果你觉得本站很棒,可以通过扫码支付打赏哦!
微信扫码:你说多少就多少~
微信扫码
支付宝扫码:你说多少就多少~
支付宝扫码
×