Layui的form表单提交的很多处理写到了其自有的js逻辑中,需要注意的一项是如果使用js中的逻辑来进行提交的话,html部分中的登录button按钮需要写成button。不然会在js处理后仍然页面提交。Layui的form表单提交的js代码及服务端的处理代码示例如下:本文地址:http://47.93.183.36/article/912.html,未经许可,不得转载.
<!--表单登录html部分--> <form method="post" class="layui-form" > <input name="username" placeholder="用户名" type="text" lay-verify="required" class="layui-input" > <hr class="hr15"> <input name="password" lay-verify="required" placeholder="密码" type="password" class="layui-input"> <hr class="hr15"> <input value="登录" lay-submit lay-filter="login" style="width:100%;" type="button"> <hr class="hr20" > </form> <!--js部分--> <script> $(function () { layui.use('form', function(){ var form = layui.form; form.on('submit(login)', function(data){ $.ajax({ url:'/login', method:'post', data:data.field, dataType:'JSON', //请求的页面响应成功,则进行处理: success:function(res){ if(res.code==0){ //弹出提示,并在1秒后进行跳转 layer.msg("提交成功",{icon: 1, time: 1000},function(){ layer.msg(res.msg); location.href='index'; return false; }); }else{ layer.msg("登录失败:" + res.msg); return false; } }, //请求的页面响应失败,则进行处理: error:function (data) { layer.msg(JSON.stringify(data.field),function(){ location.reload(); }); return false; } }) }); }); }) </script> <!-- 底部结束 --> </body> </html>本文地址:http://47.93.183.36/article/912.html,未经许可,不得转载.
服务端响应json格式即可,例如java里在springboot中示例返回一下json:本文地址:http://47.93.183.36/article/912.html,未经许可,不得转载.
@PostMapping("/login") @ResponseBody public Map loginCheck(@RequestParam("username") String username, @RequestParam("password") String password){ System.out.println(username); System.out.println(password); Map<String,Object> map= new HashMap<>(); if("admin".equals(username) && "123456".equals(password)){ map.put("msg","ok"); map.put("code",0); }else{ map.put("msg","账号或密码有误."); map.put("code",1); } return map; }本文地址:http://47.93.183.36/article/912.html,未经许可,不得转载.
本文地址:http://47.93.183.36/article/912.html 未经许可,不得转载. 手机访问本页请扫描右下方二维码.
手机扫码直接打开本页面 |