Html实现局部发送验证（页面不跳转）

原创已于 2022-03-08 10:18:19 修改 · 977 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#分布式 #springboot #html

于 2022-03-08 10:15:19 首次发布

SpringBoot 同时被 2 个专栏收录

17 篇文章

订阅专栏

前端

8 篇文章

订阅专栏

本文介绍如何使用HTML和后台API实现在不刷新页面的情况下，用户输入邮箱并获取和验证验证码的过程，重点在于POST请求和Controller的处理方式。

Html实现局部发送验证（页面不跳转）

场景

在这里插入图片描述

1、html页面

<label class="txtin-box">
    <input class="txtin" type="email" id="email" name="email" placeholder="邮箱" required/>
</label>
<label class="txtin-box txtin-box-code">
    <input class="txtin" type="text" name="vercode" placeholder="邮箱验证码" required/>
    <a onclick="getkey(this)" id="get-yzm" class="get-yzm">获取验证码</a>
</label>

<script>
    function getkey(a){
        var email='email='+document.getElementById("email").value;
        var request = new XMLHttpRequest();
        request.open("POST", "/send?"+email);
        request.send(email)
    }

</script>

2、controller控制层

@RequestMapping("/send")
@ResponseBody
public void sendMessage(@RequestParam("email") String email,
                        HttpSession session){
    //发送验证码
    CodeUtil codeUtil=new CodeUtil();
    //获取六位验证码
    String randomCode = codeUtil.getRandomCode(6);
    //先清除session域
    session.removeAttribute("checkCode");
    //加密验证码存放session域中
    session.setAttribute("checkCode",codeUtil.passwordEncoder().encode(randomCode));
    sendMessage.sendMessage(email,randomCode);
}