laravel7 H-ui模板ajax修改(资源路由)
1:列表首页设置点击事件,并将id传至后台,查询数据
<td class="f-14"><a title="编辑" href="javascript:;" onclick="admin_role_edit('角色编辑','/admin/role/{{$item->id}}/edit','1')" style="text-decoration:none"><i class="Hui-iconfont"></i></a>
2:设置路由
Route::resource('role','Role');
3:控制器代码:根据id查询数据
public function edit($id) { //获取id,find方法查询数据,并将数据渲染至前端 $data=RoleModel::find($id); return view('admin.role.edit',compact('data')); }
4:视图页面,在input框value渲染数据,并将id进行隐藏,传至后台,根据id进行修改
<body> <article class="page-container"> <form action="" method="" class="form form-horizontal" id="form-admin-role-add"> <div class="row cl"> <label class="form-label col-xs-4 col-sm-3"><span class="c-red">*</span>角色名称:</label> <div class="formControls col-xs-8 col-sm-9"> <input type="text" class="input-text" value="{{$data->role_name}}" placeholder="" id="role_name" name="role_name"> </div> </div> {{-- 将id进行隐藏--}} <div> <input type="hidden" name="id" value="{{$data->id}}" id="id"> </div> <div class="row cl"> <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-3"> <button type="submit" class="btn btn-success radius" id="admin-role-save" name="admin-role-save"><i class="icon-ok"></i> 确定</button> </div> </div> </form>
script触发ajax
//jq验证 $("#form-admin-role-add").validate({ rules:{ role_name:{ required:true, }, }, onkeyup:false, focusCleanup:false, success:"valid", submitHandler:function(form){ //获取修改的角色名称的值 var role_name=$("#role_name").val(); //获取id var id=$('#id').val(); //传_token,防止报419错误 var _token="{{csrf_token()}}" $.ajax({ //网址 url:"/admin/role/"+id, //发送的数据 data:{ role_name:role_name, _token:_token, id:id }, //返回的数据类型 dataType:"JSON", //发送的方式 type:'PUT', //返回结果 success:function (res){ if (res.code==200){ layer.msg(res.message, {icon: 1, time: 1000}); location.href='/admin/role'; }else{ layer.msg(res.message, {icon: 1, time: 1000}); } } }) } });
5:设置路由
//资源路由 Route::resource('role','Role');
6:控制器代码
public function update(Request $request, $id) { //接受数据,并去除_token $data= $request->except('_token'); // 根据id进行修改 $res=RoleModel::where('id',$data['id'])->update($data); // 进行判断 if ($res!==false){ return (['code'=>200,'data'=>$data,'message'=>'修改成功']); } return (['code'=>500,'data'=>'','message'=>'修改失败']); }