IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典案例
案例需求：编写用户登陆页面的验证码模块，在用户进行登陆时，输入验证码后不需要点击提交按钮，使用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的支持经典案例的更多相关文章
- IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典面试题
1．简述对Ajax的理解 AJAX是Asynchronous JavaScript and Xml异步的JavaScript和Xml.它一种用来改善用户体验的技术其实质是使用XMLHttpReques ...
- IT兄弟连 JavaWeb教程 jQuery对AJAX的支持
jQuery对AJAX的支持 jQuery对Ajax请求的创建.发送.响应.注册数据处理函数.JSON的解析和缓存以及传参等都进行了相应的封装,同时也考虑了浏览器的兼容性问题. jQuery中对AJA ...
- 【JavaWeb】jQuery对Ajax的支持
jQuery对Ajax的支持 jQuery对Ajax进行封装,提供了$.ajax()方法 语法:$.ajax(options) 常用设置项 说明 url 发送请求地址 type 请求类型get|pos ...
- IT兄弟连 JavaWeb教程 jQuery中其他AJAX支持的函数
● $.get()函数 $.get(url,data,function,dataType);参数说明如下: url:请求地址 data:请求参数 dataType:服务器返回的数据类型 functi ...
- Unit02： JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持，编码问题
Unit02: JSON . 使用JSON实现数据交换 . jQuery对AJAX的支持 1. 编码问题 (1)发送get请求 为什么会产生乱码? ie浏览器提供的ajax对象,对中文会使用gbk来编 ...
- JQuery中Ajax详细参数使用案例
JQuery中Ajax详细参数使用案例 参考文档:http://www.jb51.net/shouce/jquery1.82/ 参考文档:http://jquery.cuishifeng.cn/jQu ...
- jQuery九大选择器和jQuery对ajax的支持
一.jQuery九大选择器 1)基本选择器: <body> <div id="div1ID">div1</div> <div id=&qu ...
- IT兄弟连 JavaWeb教程 AJAX以及JSON字符串经典案例
案例需求:客户端发送AJAX请求服务器端获取用户信息的数据. 案例实现: 在服务器端要将Java对象转换成JSON字符串,如果使用拼接JSON字符串的方式非常繁琐,并且非常容易出错,所以一般会借助第三 ...
- IT兄弟连 JavaWeb教程 AJAX常见问题
1 中文乱码问题 ● POST提交乱码 乱码原因:所有浏览器对Ajax请求参数都使用UTF-8进行编码,而服务器默认使用ISO-8859-1去解码,所以产生乱码. 解决方法:在服务器接收请求参数前 ...
随机推荐
- Android Weekly Notes Issue #257
Android Weekly Issue #257 May 14th, 2017 Android Weekly Issue #257 本期内容包括: Gradle中关于项目的一些设置; Android ...
- Python —— 批量替换指定目录下的所有文件中指定字符串
参考:http://blog.csdn.net/zcwfengbingdongguke/article/details/13951527 代码: #!/usr/bin/python import os ...
- Linux三种网络-vmware三种网络模式
Host-Only 桥接 NAT VMware虚拟机三种联网方法及原理 一.Brigde——桥接:默认使用VMnet0 1.原理: Bridge 桥"就是一个主机,这个机器拥有两块网卡,分别 ...
- python列表切片
Python中符合序列的有序序列都支持切片(slice),例如列表,字符串,元组. 格式:[start:end:step] start:起始索引,从0开始,-1表示结束 end:结束索引 step:步 ...
- BZOJ(begin) 1328 [Usaco2003 Open]Jumping Cows：贪心【波峰波谷模型】
题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=1328 题意: 给你一个长度为n的正整数序列. 可以选任意个数字,只能从左往右选. 偶数 ...
- ES忽略TF-IDF评分——使用constant_score
Ignoring TF/IDF Sometimes we just don’t care about TF/IDF. All we want to know is that a certain wor ...
- javacpp-FFmpeg系列之2：通用拉流解码器，支持视频拉流解码并转换为YUV、BGR24或RGB24等图像像素数据
javacpp-ffmpeg系列: javacpp-FFmpeg系列之1:视频拉流解码成YUVJ420P,并保存为jpg图片 javacpp-FFmpeg系列之2:通用拉流解码器,支持视频拉流解码并转 ...
- vijos:P1155集合位置(次短路)
描述 每次有大的活动,大家都要在一起“聚一聚”,不管是去好乐迪,还是避风塘,或者汤姆熊,大家都要玩的痛快.还记得心语和花儿在跳舞机上的激情与释放,还记得草草的投篮技艺是如此的高超,还记得狗狗的枪法永远 ...
- POJ3259(ford判环)
Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 39078 Accepted: 14369 Descr ...
- mysql5.5换成mysql8.0
由于在建表钟发现有些语句就是录不进去,研究发现是因为5.5版本过低导致,就想换到5.7版本,结果一看8.0都出了,据官方说明8.0要比5系列快2倍网上,遂直接换成8.0了,不过这个过程真的心累. 1. ...