SpringSSM项目中用Jquery实现验证码

最新推荐文章于 2022-09-20 09:41:37 发布

Marry_Su

最新推荐文章于 2022-09-20 09:41:37 发布

阅读量213

点赞数

分类专栏： JavaEE 文章标签： java intellij-idea

本文链接：https://blog.youkuaiyun.com/weixin_45914112/article/details/124388185

版权

JavaEE 专栏收录该内容

8 篇文章

订阅专栏

条件

搭建一个可运行的SpringMVCWeb环境
下载一个Jquery框架文件放到静态文件夹下
如图：

pom.xml中引入依赖包

<!--    验证码kaptcha-->
    <dependency>
      <groupId>com.github.penggle</groupId>
      <artifactId>kaptcha</artifactId>
      <version>2.3.2</version>
      <exclusions>
        <exclusion>
          <groupId>javax.servlet</groupId>
          <artifactId>javax.servlet-api</artifactId>
        </exclusion>
      </exclusions>
    </dependency>

配置Web.xml的servlet

<!--  配置验证码 begin-->
  <servlet>
    <servlet-name>cap</servlet-name>
    <servlet-class>
      com.google.code.kaptcha.servlet.KaptchaServlet
    </servlet-class>
    <init-param>
      <param-name>kaptcha.border</param-name>
      <param-value>no</param-value>
    </init-param>
    <init-param>
      <param-name>kaptcha.textproduce.char.length</param-name>
      <param-value>4</param-value>
    </init-param>
    <init-param>
      <param-name>kaptcha.textproducer.char.string</param-name>
      <param-value>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789</param-value>
    </init-param>
    <init-param>
      <param-name>kaptcha.background.clear.to</param-name>
      <param-value>211,229,237</param-value>
    </init-param>
    <init-param>
      <param-name>kaptcha.session.key</param-name>
      <param-value>captcha</param-value>
    </init-param>
    
  </servlet>
  <servlet-mapping>
    <servlet-name>cap</servlet-name>
    <url-pattern>/captcha</url-pattern>
  </servlet-mapping>
  <!--  配置验证码 end-->

新建一个Controller层，编写KaptchaController类

package sjmMvc.controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpSession;
@RestController
public class KaptchaController {
    @RequestMapping("/getcaptcha")
    public String captch(HttpSession httpSession, @RequestParam("captch")String captch){
      Object captcha =  httpSession.getAttribute("captcha");
      if (captcha.equals(captch)){
          System.out.println("验证成功！！！");
      }else {
          System.out.println("验证失败！！！");
      }
      return "success";
    }
}

新建JSP（在相应的JSP中引入Jquery文件，并编写前端相应的代码）

<script　src="/static/jquery-3.4.1/jquery-3.4.1.min.js"></script>

在ｂｏｄｙ中粘贴一下内容

<form action="/getcaptcha">
    输入验证码：<input type="text" name="captch">
    <input type="submit">
</form>
<img src="${pageContext.request.contextPath}/captcha" style="width: 85px" id="cap"/>
<script>
    $(function (){
        $("#cap").click(function (){
        //    刷新验证码
            path = $(this).attr("src")+"?"+new Date().getTime();
            $(this).attr("src".path);
        });
    });
</script>