JSP利用AJAX实现页面即时校验验证码

在JSP页面实现验证码校验文章中当时是使用的Servlet类来进行的验证码校验，但是这种方式并不能即时校验，在正常情况下都是直接在用户输入之后就进行校验，这样对用户来说很方便的。

AJAX 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

ajax 是一种浏览器异步发起请求。局部更新页面的技术。

jQuery ajax详解可参阅：jQuery与Ajax

先看效果：

这个刷新验证的原理在JSP页面实现验证码校验已经解释过了，之前说的是跳转到另一个页面进行验证判断用户输入的验证码是否正确。但是这个Ajax的效果是在前端用户输入之后即时进行验证是否正确，并且将相关提示性信息展示在页面。

这个实现原理是利用的Ajax的方式进行验证的，这个也是需要一个Servlet程序进行校验判断用户输入的验证码和session对象保存的那个验证码是否一致，如果一致就返回一个yes，不一致就返回no ，然后在页面显示这里定义一个Ajax的函数，一方面是是将用户输入的信息提交给Servlet程序，另一方面是对Servlet的返回结果进行判断，如果用户输入的正确，那就显示一个"验证码正确！"的提示信息（提示信息是在id为flagcode的div标签里显示的），反之就提示一个"验证码错误！"的提示信息。

代码示例：

在jsp页面中是需要先引进一个jQuery的库的：

<script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>

定义的两个JS函数（负责刷新验证码和负责校验验证码的）

<script type="text/javascript">

        function reloadCode() {

            document.getElementById("imagecode").src="<%= request.getContextPath()%>/imageGenerate?time" + new Date().getTime();

        }

        $(function(){<!-- -->

            $("input[name='Usercode']").change(function(){

                let Usercode = $("input[name='Usercode']").val();

                $.post("<%= request.getContextPath()%>/CodeAjax",{<!-- -->

                    Usercode : Usercode,

                },function(res){

                    if(res=="yes"){

                        $("#flagcode").empty();

                        $("#flagcode").append("验证码正确！");

                    }

                    else{

                        $("#flagcode").empty();

                        $("#flagcode").append("验证码错误！");

                    }

                })

            })

        })

</script>

页面表单：

<form action="#"method="post" >

    <input type="text" name="userid" id="userid" placeholder="请输入账号" /><br />

    <input type="password" name="password" id="password" placeholder="请输入密码" /><br />

    <input type="text" name="Usercode" id="ucode" placeholder="验证码" required="required"><div id="flagcode"></div>

    <img id="imagecode" alt="Code" src="<%= request.getContextPath()%>/imageGenerate"  width="150" height="50">

    <a href=""  id="rest"><br/>

        <font color="black" >看不清楚</font>

    </a><br/>

    <input type="submit" name="denglu" id="denglu" value="登录" />

</form>

负责校验验证码的Servlet：

package com.kailong.servlet;

import javax.servlet.ServletException;

import javax.servlet.annotation.WebServlet;

import javax.servlet.http.HttpServlet;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import java.io.IOException;

import java.io.PrintWriter;

@WebServlet("/CodeAjax")

public class CodeAjax extends HttpServlet {

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        String Usercode = request.getParameter("Usercode");

        String code = (String)request.getSession().getAttribute("piccode");

        String res = "";

        if (code.equals(Usercode)) {

                res = "yes";

        } else {

                res = "no";

        }

        PrintWriter out = response.getWriter();

        out.print(res);

        out.flush();

        out.close();

    }

    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

                doGet(request, response);

    }

}

注意：

这个是需要结合JSP页面实现验证码校验或利用Hutool-(Java工具类)实现验证码校验里面的实现验证码生成的Servlet结合的，因为前端的校验处理的验证码比对是比对的用户输入的和session对象里保存的，session对象里保存的是生成验证码时候保存进去的。

公众号首发地址：https://mp.weixin.qq.com/s/elm8hmdoKZjn7uysuyMeJw

欢迎关注公众号：愚生浅末。

JSP利用AJAX实现页面即时校验验证码的更多相关文章

利用ajax异步校验验证码（转）
利用ajax异步校验验证码示例结果如图所示具体步骤如下: step1: jsp页面及js脚本 <%@page pageEncoding="utf-8" contentTy ...
Struts2.5 利用Ajax将json数据传值到JSP
AJAX +JSON=>JSP AJAX AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着 ...
利用ajax短轮询+php与服务器交互制作简易即时聊天网站
主流的Web端即时通讯方案大致有4种:传统Ajax短轮询.Comet技术.WebSocket技术.SSE(Server-sent Events). 本文主要介绍ajax短轮询的简易实现方式. 看懂此文 ...
javaweb利用ajax使登录窗口不跳转页面实现对账号密码的判断
和上一篇判断用户名是否被占用不跳转页面类似!利用ajax实现跳转,要导入jquery文件库!具体代码我会贴出来,注释在里面!!可以观摩一手!(代码我也留下链接,如果失效,评论补发,代码可能导入也无法使 ...
C# Ajax 手机发送短信验证码校验验证码菜鸟级别实现方法
1.Ajax请求处理页面: using System; using System.Collections.Generic; using System.Linq; using System.Web; u ...
利用 html的锚点（元素a）功能实现ajax单页面应用的浏览器后退前进功能
一.问题随着AJax技术的普及,单页面web程序的应用越来越广泛. 所谓单页面应用程序,简单的说,就是应用只有一个主网页,第一次加载后,后续页面只会利用js和ajax到服务器获取数据进行页面的局部刷 ...
html5新特性：利用history的pushState等方法来解决使用ajax导致页面后退和前进的问题
一.背景使用ajax,可以实现不需要刷新整个页面就可以进行局部页面的更新.这样可以开发交互性很强的富客户端程序,减少网络传输的内容.但长期以来存在一个问题,就是无法利用浏览器本身提供的前进和后退按钮 ...
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面
js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...
java图形验证码生成工具类及web页面校验验证码
最近做验证码,参考网上案例,发现有不少问题,特意进行了修改和完善. 验证码生成器: import javax.imageio.ImageIO; import java.awt.*; import ja ...
day11（jsp入门&Cookie&HttpSession&一次性图片校验码）
day11 JSP入门 1 JSP概述 1.1 什么是JSP JSP(Java Server Pages)是JavaWeb服务器端的动态资源.它与html页面的作用是相同的,显示数据和获取数据. ...

随机推荐

KFS邮件自动告警-数据比对-数据修复配置方法
一.告警机制用户可以通过配置告警机制,在比对完成和节点报错时接收到邮件告警. 告警机制共包含3个方面: 1. 告警配置 2. 用户订阅 3. 告警历史 KFS邮箱分两个部分,一个是接收告警信息的邮箱 ...
Docker容器网络基础总结
ifconfig 之 docker0 基于Linux的虚拟网桥(通用网络设备的抽象) 虚拟网桥特点: 1. 可以设置IP地址 2.相当于拥有一个隐藏的虚拟网卡 docker0 的地址划分 IP: 17 ...
java 类名后加变量名是什么意思？
回答这个问题我们需要先了解两个事情: A是一个类,我们如果对他进行实例化,需要这样写: A a = new A(); 详细解释一下这个语句,首先等号左边做的事情:在JVM栈内存(stack)中定义了一 ...
《Win10——如何进入高级启动选项》
Win10--如何进入高级启动选项第一种方法: 管理员命令提示符输入如下代码,自动重启并进入高级启动选项. shutdown /r /o /f /t 00 第二种方法: 1. 管 ...
Python数据科学手册-机器学习: 流形学习
PCA对非线性的数据集处理效果不太好. 另一种方法流形学习 manifold learning 是一种无监督评估器,试图将一个低维度流形嵌入到一个高纬度空间来描述数据集 . 类似一张纸 (二维) ...
15. 第十四篇安装CoreDNS
文章转载自:https://mp.weixin.qq.com/s?__biz=MzI1MDgwNzQ1MQ==&mid=2247483850&idx=1&sn=4bfdb26f ...
记录阿里云安全组设置遇到的奇葩问题--出口ip
之前公司使用的路由器里使用的是PPPOE拨号的形式上网的,根据拨号后得到的ip地址,配置到阿里云的安全组里,具体来说是配置到22端口里,也就是说只有特定ip才能访问22端口,也即是说只允许公司网络远程 ...
从应用访问Pod元数据-DownwardApi的应用
对于某些需要调度之后才能知道的数据,比如 pod 的 ip,主机名,或者 pod 自身的名称等等,k8s 依旧很贴心的提供了 Downward API 的方式来获取此类数据,并且可以通过环境变量或者文 ...
C#并发编程-3 并行编程基础
如果程序中有大量的计算任务,并且这些任务能分割成几个互相独立的任务块,那就应该使用并行编程. 并行编程用于分解计算密集型的任务片段,并将它们分配给多个线程.这些并行处理方法只适用于计算密集型的任务. ...
acwing349 黑暗城堡（最短路径生成树）
求出最短树,用乘法原理统计答案就行了(模拟prim过程). 不知道说什么了,直接上代码: 1 #include<cstring> 2 #include<iostream> 3 ...

JSP利用AJAX实现页面即时校验验证码

JSP利用AJAX实现页面即时校验验证码的更多相关文章

随机推荐

热门专题