laravel7 ajax H-ui框架添加数据至数据库

1：定义路由：

//租房
Route::resource('house','fang\FangattrController');

2：控制器访问前端框架：

 public function create()
    {
        //前端添加页面
        return  view('house.create');
    }

 

 

3：HTML页面代码：

   <form class="form form-horizontal" id="form-article-add" >
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-3">是否顶级：</label>
            <div class="formControls col-xs-8 col-sm-9"> <span class="select-box">
                <select class="select" size="1" name="pid" id="pid">
                    <option value="" selected>__请选择__</option>
                    <option value="1" selected>菜单</option>
                    <option value="0" selected>顶级</option>
                </select>
                </span> </div>
        </div>

        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>字段名</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="" placeholder="" id="field_name" name="field_name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">属性名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" value="0" placeholder="" id="name" name="name">
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">图标：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <div id="picker">上传文章封面</div>
            </div>
            <div class="formControls col-xs-4 col-sm-4">
                <input type="hidden" value="{{ config('up.pic') }}" name="icon" id="icon"/>
                <img src="{{ config('up.pic') }}" id="pic" name="icon" style="width: 50px;">
            </div>
        </div>

        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>
    </form>

<script type="text/javascript">
        //表单验证通过发送ajax
        $("#form-article-add").validate({
            submitHandler:function(form){
                //获取父级名称的值
                var pid=$("#pid").val();
                //获取图标的值
                var icon=$("#icon").val();
                //获取字段名的值
                var field_name=$("#field_name").val();
                //获取属性名称的值
                var name=$("#name").val();
                //传_token，防止报419错误
                var  _token="{{csrf_token()}}"
                $.ajax({
                    //网址
                    url:"{{url('house')}}",
                    //发送的数据
                    data:{
                        field_name:field_name,
                        name:name,
                        _token:_token,
                        pid:pid,
                        icon:icon
                    },
                    //返回的数据类型
                    dataType:"JSON",
                    //发送的方式
                    type:'POST',
                    //返回结果
                    success:function (res){
                        if (res.code==200){
                            layer.msg(res.message, {icon: 1, time: 1000});
                            location.href='/house';

                        }else{
                            layer.msg(res.message, {icon: 5, time: 1000});
                        }



                    }
                })
            }

        });
</script>

4：控制器代码：

    public function store(Request $request)
    {
        //接受ajax发过来的数据
        $data=$request->except('_token');
        //   添加入库
        $res=Fangattr::insert($data);
//        返回三要素
        if ($res!==false){
            return ['code'=>200,'message'=>'添加成功','data'=>$data];
        }
        return ['code'=>500,'message'=>'添加失败','data'=>''];

    }