验证码异步校验可以防止表单提交后因验证码不正确导致已填的其它项都清空。

整个过程图如下

验证码输入框出代码

 <div class="form-group">
<label for="date" class="col-sm-2 control-label">验证码</label>
<div class="col-sm-3">
<input type="text" class="form-control" name="checkCode" id="checkCode" onblur="checkCodeFn()">
</div>
<div class="col-sm-2">
<img src="${pageContext.request.contextPath }/checkImg" onclick="changeImg(this)" />
</div>
<div id="checkCodeDiv"> </div> </div>

ajax异步校验代码

 <script type="text/javascript">

     function checkCodeFn() {
//alert(666);
var checkCode_client = $("#checkCode").val();
$.ajax({
"async":true,
"url":"${pageContext.request.contextPath}/checkCode",
"data":{"checkCode_client":checkCode_client},
"type":"POST",
"dataType":"json",
"success":function(data) {
$("#checkCodeDiv").html(data.info);
$("#checkCodeDiv").css("color","red");
} });
}
</script>

进行验证码校验的servlet

 package com.alphajuns.web.servlet;

 import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class CheckCodeServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
// 获得用户输入的验证码
String checkcode_client = request.getParameter("checkCode_client");
// 获得图片中生成的验证码
String checkcode_session = (String) request.getSession().getAttribute("checkcode_session");
// 比较生成的验证码和输入的验证码
if (!checkcode_client.equals(checkcode_session)) {
response.getWriter().write("{\"info\":\"incorrect\"}");
} else {
response.getWriter().write("{\"info\":\"\"}");
}
} public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}

测试结果可行

Ajax实现验证码异步校验的更多相关文章

  1. 利用ajax异步校验验证码(转)

    利用ajax异步校验验证码 示例结果如图所示 具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...

  2. struts2中的Ajax异步校验

    登录时验证码的异步校验: 1.验证码生成的是图片因此在struts.xml文件里面配置action 时,result标签中type 属性是stream 2.验证码图片的src的值为配置action名字 ...

  3. SSH实战 · AJAX异步校验

    前台JS代码 /*异步验证用户名的输入格式以及是否存在*/ function CheckUsername(){      /*取到用户名输入框*/      var nametxt = documen ...

  4. 使用AJAX完成用户名是否存在异步校验

    一.JSP代码: 1.事件触发:onblur 2.编写AJAX代码:向Action中提交,传递username参数 <script> function checkUsername(){ / ...

  5. SSH网上商城---使用ajax完成用户名是否存在异步校验

    小伙伴在上网的时候,需要下载或者观看某些视频资料,更或者是在逛淘宝的时候,我们都需要注册一个用户,当我们填写好各种信息,点击确定的时候,提示用户名已经存在,小编就想,为什么当我们填写完用户名的时候,她 ...

  6. 问答项目---登陆账号密码登陆做AJAX异步校验

    异步验证管理员帐号方法: /* 异步验证管理员帐号 */ public function checkAccount(){ if(!IS_AJAX){echo "页面不存在";die ...

  7. 【项目实战】---使用ajax完毕username是否存在异步校验

    小伙伴在上网的时候.须要下载或者观看某些视频资料,更或者是在逛淘宝的时候.我们都须要注冊一个用户,当我们填写好各种信息,点击确定的时候.提示username已经存在.小编就想,为什么当我们填写完use ...

  8. day102:MoFang:后端完成对短信验证码的校验&基于celery完成异步短信发送&flask_jwt_extended&用户登录的API接口

    目录 1.用户注册 1.后端完成对短信验证码的校验 2.基于celery实现短信异步发送 2.用户登录 1.jwt登录验证:flask_jwt_extended 2.服务端提供用户登录的API接口 1 ...

  9. javascript将异步校验表单改写为同步表单

    同步表单校验的缺点 响应错误信息时,需要重新加载整个页面(虽然有缓存,客户端仍然需要通过http协议对比每个文件是否有更新,以保持文件最新) 服务器响应错误以后,用户之前所输入的信息全部丢失了,用户需 ...

随机推荐

  1. struts xml中的result的类型、全局结果集、异常mapping、继承

    例子: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE struts PUBLIC     ...

  2. Load和CPU利用率是如何算出来的 (转发)

    本文内容遵从CC版权协议, 可以随意转载, 但必须以超链接形式标明文章原始出处和作者信息及版权声明网址: http://www.penglixun.com/tech/system/how_to_cal ...

  3. gitlab8.0 一键安装 经过自己测试 发送邮件部分最难搞 国内没有说明白的

    邮件发送部分,弄了一天终于弄好啦,FQ过去查的资料,奶奶的无语 Gitlab搭建步骤 一:操作系统环境 CentOS: 6.5 –x86-64 二:安装方式 一种是自定义安装,一种是一键安装 三:自定 ...

  4. [机器学习实战] k邻近算法

    1. k邻近算法原理: 存在一个样本数据集,也称作训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类的对应关系.输入没有标签的新数据后,将新数据的每个特征与样本集中数据对 ...

  5. 设置mvc路由映射

    routes.MapRoute( "chapter", "{action}/{bookId}/{pageindex}", new { controller = ...

  6. iperf使用

    1. sourceforge搜索iperf下载 2. ./configure make make install 3. server:iperf -s -p 12345 -i 1 -M: client ...

  7. JS prototype 属性

    String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, "");}

  8. jsp中 自定义 tag的几种方式

    在jsp文件中,可以引用tag和tld文件. 1.对于tag文件,使用tagdir引用(这个直接是引用的后缀tag文件的jsp文件) <%@ taglib prefix="ui&quo ...

  9. oracle数据库访问order by不起作用分析

    `SELECT * FROM student ROWNUM <= 1 ORDER BY id ASC`执行结果,返回结果没有排序.使用驱动"System.Data.OracleClie ...

  10. 【未完成】junit简单使用

    参考资料: 一般使用:https://www.w3cschool.cn/junit/ 集成spring: https://www.cnblogs.com/faramita2016/p/7637086. ...