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="请输入验证码" οnblur="validCode()" ><img src="checkCode.do" id="imgcode" οnclick= "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向服务端重新获取验证码
不正确,并且登陆按钮无法点击
转载于:https://www.cnblogs.com/itxdl/p/10995877.html
IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典案例相关推荐
- java接口支持ajax,【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:服务器返回的数据类型 functio ...
- java web 请求跟踪_IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie技术
原标题:IT兄弟连 JavaWeb教程 Servlet会话跟踪 Cookie技术 Cookie使用HTTPHeader传递数据.Cookie机制定义了两种报头,Set-Cookie报头和Cookie报 ...
- java jquery提交表单数据_[Java教程]jquery实现ajax提交表单信息
[Java教程]jquery实现ajax提交表单信息 0 2016-08-23 15:00:08 最近在思考优化项目,想自己扩展一个jquery自动获取表单中的数据进行ajax提交.本人没有完整性学习 ...
- jquery对ajax的支持
jquery对ajax的支持 前面详细介绍的了XMLHttpRequest http://www.cnblogs.com/shenliang123/archive/2012/05/13/2498524 ...
- IT兄弟连 JavaWeb教程 AJAX定义以及解决的问题
2019独角兽企业重金招聘Python工程师标准>>> Ajax是"Asynchronous JavaScript And XML"的缩写(即:异步的JavaSc ...
- IT兄弟连 JavaWeb教程 监听器3
2019独角兽企业重金招聘Python工程师标准>>> 监听域对象中属性变更的监听器 域对象中属性的变更的事件监听器就是用来监听ServletContext.HttpSession. ...
- IT兄弟连 JavaWeb教程 JSON和JSON字符串
2019独角兽企业重金招聘Python工程师标准>>> JSON (JavaScript Object Notation)是JavaScript语言中的一种对象类型.JSON的好处是 ...
- IT兄弟连 JavaWeb教程 MVC设计模式
MVC是Model-View-Controller的简称,即模型-视图-控制器.MVC是一种设计模式,它强制性地把应用程序的数据展示.数据处理和流程控制分开.MVC把应用程序分成3个核心模块:模型.视 ...
最新文章
- BZOJ 2431: [HAOI2009]逆序对数列【DP】
- js文件里获取路由 vue_「如何优雅的使用Vue?」不可不知的Vue实战技巧
- MySQL-02:“数据库”操作基本命令及权限笔记
- AtCoder Beginner Contest 192 F - Potion 背包dp
- ds1302典型应用原理图_不同类型的光纤激光器,在工业中有哪些典型应用
- 美团数据仓库-数据脱敏
- 苹果笔记本电脑进入新时代
- java 正则高级应用_JAVA正则表白式高级用法(分组与捉拿).
- linux软件管理(yum,rpm)
- web前端要学哪些东西,前端大牛分享的技能整理
- IntelliJ IDEA 开发swing(一)
- shiro中ini配置文件
- html 显示unicode字符,网页中使用Unicode字符
- UE5全局光照系统Lumen解析与优化
- 大道至简:企业需要的中台是什么?答案是:指挥官体系
- oracle中那个日期怎么相减_oracle 日期相减
- Linux 内核 notifier机制
- 股票入门(一)基础知识
- php上传文件失败解决方案
- ABR与ASBR是什么?区别又是什么?
热门文章
- boost::intrusive::auto_unlink_hook用法的测试程序
- boost::geometry::select_most_precise用法的测试程序
- boost::function模块实现operator()的测试程序
- GDCM:将PAPYRUS 3.0文件转换为dcm文件的的测试程序
- 宏BOOST_TEST_TRAIT_TRUE的用法
- boost::container模块实现全部分配的测试程序
- C++words search单词搜索的算法实现(附完整源码)
- C++智能指针简单介绍
- C++Opengl绘制三角形源码
- C++11空指针(nullptr)