實現同步載入驗證碼和使用者名稱是否存在的判斷通過Ajax
阿新 • • 發佈：2018-12-31
1.驗證碼工具類
package com.syh.utils; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.io.PrintWriter; import java.util.Random; import javax.imageio.ImageIO; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; public class ValidateCodeServlet extends HttpServlet { private static final long serialVersionUID = 1L; @Override protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { createCode(request); write(response.getOutputStream()); } // 圖片的寬度 private int width = 160; // 圖片的高度 private int height = 28; // 要輸入驗證碼的數量 private int codeCount = 4; // 驗證碼上面的模糊線 private int lineCount = 150; // 驗證碼，要和使用者輸入的對比 private String code = null; private BufferedImage buffImg = null; private char[] codeSequence = { 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z', '1', '2', '3', '4', '5', '6', '7', '8', '9' }; public void createCode(HttpServletRequest request) { int x = 0, fontHeight = 0, codeY = 0; int red = 0, green = 0, blue = 0; x = width / (codeCount + 2); fontHeight = height - 2; codeY = height - 4; buffImg = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB); Graphics2D g = buffImg.createGraphics(); Random random = new Random(); g.setColor(Color.WHITE); g.fillRect(0, 0, width, height); Font font = new Font("Fixedsys", Font.BOLD, fontHeight); g.setFont(font); for (int i = 0; i < lineCount; i++) { int xs = random.nextInt(width); int ys = random.nextInt(height); int xe = xs + random.nextInt(width / 8); int ye = ys + random.nextInt(height / 8); red = random.nextInt(255); green = random.nextInt(255); blue = random.nextInt(255); g.setColor(new Color(red, green, blue)); g.drawLine(xs, ys, xe, ye); } StringBuffer randomCode = new StringBuffer(); for (int i = 0; i < codeCount; i++) { String strRand = String.valueOf(codeSequence[random.nextInt(codeSequence.length)]); red = random.nextInt(255); green = random.nextInt(255); blue = random.nextInt(255); g.setColor(new Color(red, green, blue)); g.drawString(strRand, (i + 1) * x, codeY); randomCode.append(strRand); } code = randomCode.toString(); HttpSession session = request.getSession(); session.setAttribute("code", code); } public void write(String path) throws IOException { OutputStream sos = new FileOutputStream(path); this.write(sos); } public void write(OutputStream sos) throws IOException { ImageIO.write(buffImg, "png", sos); sos.close(); } public BufferedImage getBuffImg() { return buffImg; } public String getCode() { return code; } }
2.驗證碼使用
jsp程式碼
<form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet"> <table> <caption style="font-size:25px;">註冊本系統使用者</caption> <tr> <td><span>使用者名稱</span></td> <td><input type="text" name="username"/></td> </tr> <tr class="info"> <td>提示資訊</td> <td><span></span></td> </tr> <tr> <td><span>密 碼</span></td> <td><input type="password" name="password"/></td> </tr> <tr> <td><span>重複密碼</span></td> <td><input type="password" name="repassword"/></td> </tr> <!-- 驗證碼 --> <tr> <td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td> <td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="點選重新整理驗證碼" onclick="getCode()" style="cursor: pointer;"/></td> </tr> <tr id="btn"> <td align="center"><input type="submit" name="sub" value="註冊"/></td> </tr> </table> </form>
js程式碼
function getCode(){
$("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="
+ new Date().getTime());
}3.遇到的問題
自己輸入的驗證碼和系統通過session物件返回的驗證碼老是不一致，老是出現從session中取出的值是上次重新整理頁面的的驗證碼，老是不同步，在這裡我是用的Ajax來實現了同步
$.ajax({ cache: true, type: "POST", url:ajaxCallUrl, async: false, error: function(request) { alert("Connection error"); evt.preventDefault(); }, success: function(data) { //回撥函式 if("驗證失敗" == data){ evt.preventDefault(); } } });
4.通過Ajax訪問檢查驗證碼是否正確的Servlet程式碼
package com.syh.utils;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class CheckImageCodeServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String code = request.getParameter("code");
String code1 = (String) request.getSession().getAttribute("code");
PrintWriter writer = response.getWriter();
if(code1.equals(code)){
writer.write("驗證成功");
}else{
writer.write("驗證失敗");
}
}
}
5.web.xml檔案的配置的驗證的驗證碼的servlet配置
<servlet>
<servlet-name>CheckImageCodeServlet</servlet-name>
<servlet-class>com.syh.utils.CheckImageCodeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckImageCodeServlet</servlet-name>
<url-pattern>/checkImageCodeServlet</url-pattern>
</servlet-mapping>========================================================================
5.整個jsp頁面的程式碼
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>註冊使用者</title>
<style type="text/css">
html,body{
padding:0px;
margin:0px;
height:100%;
width:100%;
}
#main,table{
width:40%;
margin:0 auto;
background:#DBDBDB;
height:40%;
}
table{
margin-top:20%;
}
table tr {
height:50px;
line-height:50px;
}
#btn button,#btn input{
margin-top:50px;
width:80px;
height:30px;
background:green;
text-align:center;
}
.info{
color:red;
FILTER: alpha(opacity=0);
opacity:0;
height:20px;
line-height:20px;
}
</style>
<script type="text/javascript" src="${pageContext.request.contextPath }/file/js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[name='username']").blur(function(){
CheckUsername();
} );
})
CheckUsername = function(){
var username = $("input[name=username]").val();
//alert(username);
if($.trim(username) != ""){
var username1 = $.trim(username);
/*使用Ajax進行驗證*/
var ajaxCallUrl = '${pageContext.request.contextPath}/checkUsernameServlet?username=' + username1;
$.ajax({
cache: true,
type: "POST",
url:ajaxCallUrl,
async: false,
error: function(request) {
alert("Connection error");
},
success: function(data) {
//驗證使用者名稱是否已經存在
//alert(data);
if("no" == data){
$(".info td span").html("使用者名稱已經被佔用");
$(".info").css("color","red");
}else{
$(".info td span").html("使用者名稱可以使用");
$(".info").css("color","blue");
}
$(".info").css("opacity","1");
}
});
}else{
//提示使用者名稱不能為空
}
}
function getCode(){
$("#CreateCheckCode").attr("src","${pageContext.request.contextPath}/validateCodeServlet?time="
+ new Date().getTime());
}
//鼠標出輸入框時驗證
CheckPassord = function(){
var password = $("input[name=password]").val();
var repassword = $("input[name=repassword]").val();
if($.trim(password) != '' && $.trim(repassword) != '' && $.trim(password) == $.trim(repassword)){
return 1;
}else{
return 0;
}
}
function CheckForm(form,evt){
var flag = 0;
//驗證使用者是否為空
if($.trim($("input[name=username]").val()) != ""){
flag = 1;
}
//驗證使用者名稱
var text = $(".info td span").html();
alert(text);
if(text == "使用者名稱可以使用"){
flag = 1;
}else{
flag = 0;
}
if(flag == 1){
//驗證密碼是否相同
flag = CheckPassord();
if(flag ==1){
//驗證驗證碼是否正確
var code = $("#code").val();
var ajaxCallUrl = '${pageContext.request.contextPath}/checkImageCodeServlet?code=' + code;
/*Ajax驗證驗證碼*/
$.ajax({
cache: true,
type: "POST",
url:ajaxCallUrl,
async: false,
error: function(request) {
alert("Connection error");
evt.preventDefault();
},
success: function(data) {
//回撥函式
if("驗證失敗" == data){
evt.preventDefault();
}
}
});
}else{
evt.preventDefault();
}
}else{
evt.preventDefault();
}
}
</script>
</head>
<body>
<h2>${error}</h2>
<div id = "main">
<form method="get" onSubmit="javascript:CheckForm(this,event)" action= "${pageContext.request.contextPath}/addStudentServlet">
<table>
<caption style="font-size:25px;">註冊本系統使用者</caption>
<tr>
<td><span>使用者名稱</span></td>
<td><input type="text" name="username"/></td>
</tr>
<tr class="info">
<td>提示資訊</td>
<td><span></span></td>
</tr>
<tr>
<td><span>密 碼</span></td>
<td><input type="password" name="password"/></td>
</tr>
<tr>
<td><span>重複密碼</span></td>
<td><input type="password" name="repassword"/></td>
</tr>
<!-- 驗證碼 -->
<tr>
<td><input style="width:60px;margin-right:10px;" id="code" value="sfds" type="text"/></td>
<td><img src="${pageContext.request.contextPath}/validateCodeServlet" id="CreateCheckCode" align="middle" title="點選重新整理驗證碼" onclick="getCode()" style="cursor: pointer;"/></td>
</tr>
7.上面的jsp程式碼使用到了使用者名稱通過Ajax進行驗證是否已經存在的servlet
package com.syh.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.syh.pojo.Student;
import com.syh.service.StudentService;
public class CheckUsernameServlet extends HttpServlet{
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String username = request.getParameter("username");
PrintWriter writer = response.getWriter();
if(username != null && username != ""){
Student student = null;
StudentService service = new StudentService();
student = service.findSampleStudent(username);
System.out.println("啥情況");
if(student.getId() == null){
System.out.println("ok");
writer.write("ok");
}else{//不為空的話說明擁有該使用者名稱的學生存在
System.out.println("使用者名稱：no" + student.getUsername());
writer.write("no");
}
}else{
writer.write("no");
}
}
}
8.驗證使用者名稱是否存在的servlet的配置在web.xml
<servlet>
<servlet-name>CheckUsernameServlet</servlet-name>
<servlet-class>com.syh.servlet.CheckUsernameServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>CheckUsernameServlet</servlet-name>
<url-pattern>/checkUsernameServlet</url-pattern>
</servlet-mapping>