案例需求：编写用户登陆页面的验证码模块，在用户进行登陆时，输入验证码后不需要点击提交按钮，使用AJAX异步地向服务器发送验证验证码的请求。如果验证码正确，可以点击提交按钮，如果验证码输入错误，提示用户。如果用户看不清验证码，点击验证码还可以刷新出新的验证码。

案例实现：

验证码原理：当页面请求一个验证码的Servlet时，这个Servlet会把数据以图片的形式传给客户端，并把数据以字符串的形式存入了session中。当用户以图片为标准输入对应的验证码并发送给对应的用来验证验证码的Servlet时，验证验证码的Servlet收到用户输入的数据，并从session取出对应的验证码字符进行验证即可。

●  定义向客户端发送验证码的Servlet。详细代码如下：

package com.xdl.servlet;

import com.sun.image.codec.jpeg.JPEGCodec;

import com.sun.image.codec.jpeg.JPEGImageEncoder;

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 javax.servlet.http.HttpSession;

import java.awt.*;

import java.awt.image.BufferedImage;

import java.io.IOException;

import java.io.OutputStream;

import java.util.Random;

@WebServlet("/checkCode")

public class CheckCode extends HttpServlet {

public void service(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

response.setContentType("image/jpeg");

BufferedImage image = new BufferedImage

(60, 20, BufferedImage. TYPE_INT_RGB);

Graphics g = image.getGraphics();

Random r = new Random();

g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));

g.fillRect(0, 0, 60, 20);

g.setColor(new Color(0,0,0));

String number = String.valueOf(r.nextInt(99999));

HttpSession session = request.getSession();

session.setAttribute("number", number);

g.drawString(number, 5, 15);

g.setColor(new Color(r.nextInt(255), r.nextInt(255), r.nextInt(255)));

g.drawLine(r.nextInt(60), r.nextInt(20), r.nextInt(60), r.nextInt(20));

OutputStream os = response.getOutputStream();

JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(os);

encoder.encode(image);

}

}

●  定义用来验证验证码准确性的Servlet。详细代码如下：

package com.xdl.servlet;

import java.io.IOException;

import java.io.PrintWriter;

import java.util.HashMap;

import java.util.Map;

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 net.sf.json.JSONObject;

@WebServlet("/validateCheckCode")

public class ValidateCheckCode extends HttpServlet {

protected void service(HttpServletRequest request,

HttpServletResponse response) throws ServletException, IOException {

response.setContentType("text/html;charset=utf-8");

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

String   answer = (String)request.getSession().getAttribute("number");

Map<String,Object>  info = new HashMap<>();

if(code.equals(answer)){

info.put("state", 1);

info.put("msg", "验证码正确");

}else{

info.put("state", 0);

info.put("msg", "验证码不正确");

}

String jsonStr = JSONObject.fromObject(info).toString();

PrintWriter  pw  = response.getWriter();

pw.write(jsonStr);

pw.close();

}

}

●  编写客户端页面，包括用户名输入框、密码输入框、以及验证码输入框和提交按钮。详细代码如下：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

<script type="text/javascript">

function validCode(){

$.ajax({

url:'validateCheckCode',

type:'post',

data:{code:$("#code").val()},

dataType:'json',

success:function(message){

if(message.state==1){

$("#loginBtn").removeAttr("disabled");

}else{

$("#loginBtn").attr('disabled','disabled');

}

$("#sp1").html(message.msg);

}

});

}

function  changeCode(){

$("#imgcode").attr("src","checkCode.do?r="+Math.random());

$("#loginBtn").attr('disabled','disabled');

}

</script>

</head>

<body>

账号:<input type="text" placeholder="请输入账号" name="account_no"> <br>

密码:<input type="password" placeholder="请输入密码" name="account_password">

<br>

验证码:<input type="text" name="check_code" id="code" placeholder="请输入验证码" onblur="validCode()" ><img src="checkCode.do" id="imgcode" onclick= "changeCode()"><br>

<span id="sp1"></span><br>

<input type="submit" id="loginBtn" value="登录" disabled="disabled">

</body>

</html>

目前全部的代码已经编写完成，我们打开Tomcat服务器，在浏览器中输入http://localhost:8080/checkcode/login.html。浏览器将出现如图2所示的页面。

此时是无法点击登陆按钮的，因为我们的验证码没有通过验证，现在我们输入正确的验证码，然后将鼠标移出验证码输入框。

图2  login.html

图3  输入了正确的验证码

我们输入了正确的验证码，并且服务器也已经验证通过了，现在我们就可以点击登陆按钮了。

现在我们输入错误的验证码来看看页面上会出现什么效果。

可以看到我们输入了错误的验证码，服务器检查没有通过，登陆按钮还是不可点击的。

有时我们页面上面的验证码不清晰，不能很好的辨认其中的字符，所以在我们的登陆页面中，为验证码图片添加了一个单击事件，当点击验证码图片时，页面会使用Ajax重新向服务器发送新的请求来刷新验证码。

图4  输入错误的验证码后，提示验证码

图5  使用AJAX向服务端重新获取验证码

不正确，并且登陆按钮无法点击

IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典案例的更多相关文章

  1. IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典面试题

    1．简述对Ajax的理解 AJAX是Asynchronous JavaScript and Xml异步的JavaScript和Xml.它一种用来改善用户体验的技术其实质是使用XMLHttpReques ...

  2. IT兄弟连 JavaWeb教程 jQuery对AJAX的支持

    jQuery对AJAX的支持 jQuery对Ajax请求的创建.发送.响应.注册数据处理函数.JSON的解析和缓存以及传参等都进行了相应的封装,同时也考虑了浏览器的兼容性问题. jQuery中对AJA ...

  3. 【JavaWeb】jQuery对Ajax的支持

    jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...

  4. IT兄弟连 JavaWeb教程 jQuery中其他AJAX支持的函数

    ●  $.get()函数 $.get(url,data,function,dataType);参数说明如下: url:请求地址 data:请求参数 dataType:服务器返回的数据类型 functi ...

  5. Unit02： JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持，编码问题

    Unit02: JSON . 使用JSON实现数据交换 . jQuery对AJAX的支持 1. 编码问题 (1)发送get请求 为什么会产生乱码? ie浏览器提供的ajax对象,对中文会使用gbk来编 ...

  6. JQuery中Ajax详细参数使用案例

    JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...

  7. jQuery九大选择器和jQuery对ajax的支持

    一.jQuery九大选择器 1)基本选择器: <body> <div id="div1ID">div1</div> <div id=&qu ...

  8. IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例

    案例需求:客户端发送AJAX请求服务器端获取用户信息的数据. 案例实现: 在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三 ...

  9. IT兄弟连 JavaWeb教程 AJAX常见问题

    1  中文乱码问题 ●  POST提交乱码 乱码原因:所有浏览器对Ajax请求参数都使用UTF-8进行编码,而服务器默认使用ISO-8859-1去解码,所以产生乱码. 解决方法:在服务器接收请求参数前 ...

随机推荐

  1. 5.JavaScript优化及导航菜单背后的秘密

    JavaScript优化及导航菜单背后的秘密 伍星 学习目标1.进一步了解前端优化 学习如何编写良好的 JavaScirpt2.通过导航的学习,了解JavaScirpt的应用 JavaScript在用 ...

  2. 只会用就out了，手写一个符合规范的Promise

    Promise是什么 所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Prom ...

  3. 初学OpenMP

    这两天在看多核计算的书,就要用到openmp,因为我使用vs2015,从微软可以看到是支持openmp2.0版本的 具体使用: 在vs里创造一个控制台项目,然后打开属性管理器,在属性管理器里找到配置属 ...

  4. html-webpack-plugin 中使用 title选项设置模版中的值无效

    原文地址:https://segmentfault.com/q/1010000004555431 webpack.config.js配置: var webpack = require("we ...

  5. 算法（Algorithms）第4版 练习 1.3.20

    方法实现: //1.3.20 /** * delete the kth element in a linked list, if it exists. * * @param k the kth ele ...

  6. html(HyperText Markup Language)--超文本标记语言

    1.html的简介? * 什么是html? ** HyperText Markup Language:超文本标记语言,网页语言 ** 超文本:超出文本的范畴,使用html可以轻松实现这样操作: ** ...

  7. ActorModel 概念翻译

    学习 skynet 时初次接触到 ActorModel 模型,始终觉得有必要从宏观上了解 ActorModel 的概念,所以以维基上这篇文章为参考,把文章中的部分内容翻译成中文,好让自己体会一下 Ac ...

  8. Sox语音转换的相关知识

    SoX-linux 里操作音频的瑞士军刀 Sox是最为著名的Open Source声音文件 格式转换工具.已经被广泛移植到Dos.windows.OS2.Sun.Next.Unix.Linux等多个操 ...

  9. codevs 3049 舞蹈家怀特先生

    题目描述 Description 怀特先生是一个大胖子.他很喜欢玩跳舞机(Dance Dance Revolution, DDR),甚至希望有一天人家会脚踏“舞蹈家怀特先生”.可惜现在他的动作根本不能 ...

  10. 【Lintcode】029.Interleaving String

    题目: Given three strings: s1, s2, s3, determine whether s3 is formed by the interleaving of s1 and s2 ...