前后端分离 jquery ajax 表单提交

首先来看一下form格式，注意我们可以不用用原生的action和method，而是在后面用jquery帮我们完成一切

<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="submit">
    <hr class="hr20" >
</form>

再用jquery发送ajax的post请求，再重定向到首页
这种方法的好处是：可以将2个步骤分开来

<script>
    $(function() {
        // 向后端返回数据
        $("input[type='submit']").click(function () {
            $.post("/login", $("form").serialize());
            location.assign("/index.html");  //然后直接跳转回去
            return false; //阻止表单自己的跳转
        })
    })
</script>

最后的部分是关于后端的，可以不看
（首先写一个User类用来接收表单）
用controller接收post表单，拿出里面的信息

@Slf4j
@Controller
@RequestMapping("/login")
public class LoginController {

    @ResponseBody
    @PostMapping
    public void login_(User user){
        log.info("==="+user.username);
        log.info("==="+user.password);
    }
}