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'=>'修改失败']);

    }

laravel7 H-ui模板ajax修改（资源路由）的更多相关文章

  1. 基于H.ui.Admin UI模板的网站管理后台

    最近接手一个跨境电商平台开发,客户侧重电商网站UI设计,对管理后台要求不高,由我们决定选哪一款后台模板.找来找去,感觉还是H.ui靠谱一些,主要是这个模板清爽,不需要过多选择.其他的流行后台模板也看了 ...

  2. 后台管理UI模板

    一.EasyUI easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通 ...

  3. android自定义UI模板图文详解

    不知道大家在实际开发中有没有自定义过UI模板?今天花时间研究了一下android中自定义UI模板,与大家分享一下. 每个设计良好的App都是自定义标题栏,在自定义标题栏的过程中大部分人可能都是自定义一 ...

  4. ecshop模板如何修改详细图解

    ecshop模板如何修改?很多人在问这个问题,今天就以图解的方式给大家详细说下.相信学完之后,你会很清楚如何修改ecshop模板,不管你是初学者还是程序高手. 1, ecshop的模板结构 ecsho ...

  5. laravel路由与控制器(资源路由restful)

    目前我们大致了解了laravel下,在开始一个Http程序需要先定义路由.之前的例子中,我们的业务逻辑都是在路由里实现,这对于简单的网站或web应用没什么问题,当我们需要扩大规模,程序变得复杂,分层的 ...

  6. POI根据EXCEL模板，修改内容导出新EXCEL （只支持HSSF）

    package excelPoiTest; import java.io.File; import java.io.FileInputStream; import java.io.FileOutput ...

  7. 国外一些好用的UX/UI设计工具和资源分享

    国外一些好用的UX/UI设计工具和资源分享 你今天使用的设计工具也许不再适合以后的网页和APP设计项目了.新的工具不断的推出市场,目标只有一个,让你的工作更快.更容易而且工作成效更好.今天分享的这些U ...

  8. jquery.ui.accordion的修改（支持展开多个）

    原文:jquery.ui.accordion的修改(支持展开多个) 背景:原jquery.ui.accordion插件,最多只能展开一个,不能展开多个,后来在网上找到了一个基于它的一个修改版(http ...

  9. Android UI法宝的设计资源的开发

    UI再次推荐设计资源.纯干,没有水~ 各种背景资源库 http://subtlepatterns.com/ ICON资源 https://www.iconfinder.com/ watermark/2 ...

随机推荐

  1. 浅谈C#可变参数params

    前言 前几天在群里看到群友写了一个基础框架,其中设计到关于同一个词语可以添加多个近义词的一个场景.当时群友的设计是类似字典的设计,直接添加k-v的操作,本人看到后思考了一下觉得使用c#中的params ...

  2. shell下快捷键

    ### 1.快捷键 ^C   终止前台运行的程序 ^D   退出 等价于exit ^L   清屏 ^A   光标移动到命令行的最前端 ^E   光标移动到命令行的最后端 ^U   删除光标前所有字符 ...

  3. Linux 打包压缩、软链接、硬链接、配置镜像源

    tar命令:tar -cvf 打包文件.tar  被打包文件的路径   把文件打包成tar包,但并未被压缩: [root@Server-n93yom test]# ll total 0 -rw-r-- ...

  4. 隐式意图&显示意图

    1 隐式意图     通过指定一组动作或者数据 开启activity   2 显示意图    通过指定具体包名和类名 开启activity       总结    (1)显示意图更加安全一些    ( ...

  5. Linux如何查看端口占用情况

    Linux如何查看端口 1.lsof -i:端口号 用于查看某一端口的占用情况,比如查看8000端口使用情况,lsof -i:8000 # lsof -i:8000 COMMAND PID USER ...

  6. Docker的数据管理（下）——docke镜像的创建

    Docker的数据管理(下)--docke镜像的创建 1.基于现有镜像创建 2.基于本地模板创建 3.基于 dockerfile 创建 4.Dockerfile 镜像操作常用命令 5.dockerfi ...

  7. shell脚本三剑客之awk

    shell脚本之awk命令 AWK 是一种处理文本文件的语言,是一个强大的文本分析工具 适合小型文本数据 1.工作原理 2.AWK格式 3.按行输入文本 4.按字段输入文本 5.通过管道符号,双引号调 ...

  8. 范数||x||（norm）笔记

    1. 范数的含义和定义 范数是具有"长度"概念的函数.在线性代数.泛函分析及相关领域,是一个函数,它为向量空间内的所有向量赋予非零的正的长度或大小.另一方面,半范数可以为非零的向量 ...

  9. 磁盘分区 & Linux 三剑客之 awk

    今日内容 磁盘分区 Linux 三剑客之 awk 内容详细 一.磁盘分区 磁盘分区 --> 挂载 步骤 1.关机 2.添加硬盘 3.创建分区 fdisk /dev/sdb or gdisk /d ...

  10. LAMP环境下部署项目管理软件--禅道

    禅道与Jira的对比 禅道最大的特色是创造性的将产品.项目.测试这三者的概念明确分开,互相配合,又互相制约.通过需求.任务.bug来进行交相互动,最终通过项目拿到合格的产品. Jira设计以项目为主线 ...