溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章給大家分享的是有關使用ajax怎么實現一個驗證碼功能，小編覺得挺實用的，因此分享給大家學習，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。
首先創建一個驗證碼：
<%@ page contentType="image/jpeg; charset=utf-8"
language="java" import="java.util.*,java.awt.*,java.awt.image.*,javax.imageio.*"
pageEncoding="UTF-8"%>
<!-- 以上導入awt和awt.image包 -->
<%!
//獲取隨機顏色
public Color getColor(){
Random random = new Random();
//使用rgb()隨機產生顏色
int r = random.nextInt(256);
int g = random.nextInt(256);
int b = random.nextInt(256);
return new Color(r,g,b);
}
//獲取隨機數字 產生一個4位數
public String getNum(){
String str = "";
Random random = new Random();
for(int i = 0;i < 4;i++){
str += random.nextInt(10); //0-9
}
return str;
}
%>
<%
/* 清除緩存 */
response.setHeader("pragma", "mo-cache");
response.setHeader("cache-control", "no-cache");
response.setDateHeader("expires", 0);
//產生矩形框
BufferedImage image = new BufferedImage(80,30,BufferedImage.TYPE_INT_RGB);
//獲取畫筆工具
Graphics g = image.getGraphics();
//設置矩形框的顏色
g.setColor(new Color(200,200,200));
//設置坐標和寬高
g.fillRect(0, 0, 80, 30);
//隨機產生干擾線
for(int i = 0;i < 30;i++){
Random random = new Random();
int x = random.nextInt(80);
int y = random.nextInt(30);
int x1 = random.nextInt(x + 10);
int y1 = random.nextInt(y + 10);
//設置隨機顏色
g.setColor(getColor());
//畫出來
g.drawLine(x, y, x1, y1);
}
//字的顏色和數字
g.setFont(new Font("Microsoft YaHei",Font.BOLD,16));
g.setColor(Color.BLACK);
//獲取隨機數字
String checkNum = getNum();
//給字拼接空格
StringBuffer sb = new StringBuffer();
for(int i = 0;i < checkNum.length();i++){
sb.append(checkNum.charAt(i) + " ");
}
//畫出數字
g.drawString(sb.toString(), 15, 20);
//存入session域中
session.setAttribute("CHECKNUM", checkNum); //例如1010
//將圖像以jpeg的形式通過字節流輸出
ImageIO.write(image, "jpeg", response.getOutputStream());
//清除緩存
out.clear();
//放入body中
out = pageContext.pushBody();
%>將驗證碼壓縮成圖片，在checkcode.jsp中引用,并在該頁面中利用ajax向服務器發送數據
<%@ 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%>" rel="external nofollow" >
<title>驗證碼</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<style type="text/css">
table{
margin: 100px auto;
}
</style>
</head>
<body>
<table border="0" align="center">
<tr>
<td>驗證碼</td>
<td><input type="text" name="checkcode" id="checkcodeID" maxlength="4" size="4"></td>
<td><img alt="加載失敗" src="image.jsp"></td>
<td id="show">√√√</td>
</tr>
</table>
</body>
<script type="text/javascript">
//去除空格
function trim(str){
//從左側開始替換空格
str = str.replace(/^\s*/,"");
//從左側開始替換空格
str = str.replace(/\s$/,"");
return str;
}
</script>
<script type="text/javascript">
//創建ajax對象
function createAjax(){
var ajax = null;
try{
ajax = new ActiveXObject("microsoft.xmlhttp");
}catch(e){
try{
ajax = new XMLHttpRequest();
}catch(e1){
alert("請更換瀏覽器");
}
}
return ajax;
}
</script>
<script type="text/javascript">
document.getElementById("checkcodeID").onkeyup = function(){
var checkcode = this.value;
//去除空格
checkcode = trim(checkcode);
if(checkcode.length == 4){
//獲取ajax對象
var ajax = createAjax();
//獲取去空格的內容
var method = "POST";
var url = "${pageContext.request.contextPath}/CheckcodeServlet?time="+new Date().getTime();
//準備發送異步請求
ajax.open(method, url);
//設置請求頭POST提交方式才需要
ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//拼接實體內容
var content = "checkcode=" + checkcode;
//發送請求
ajax.send(content);
//監聽服務器狀態變化
ajax.onreadystatechange = function(){
if(ajax.readyState == 4){
if(ajax.status == 200){
//獲取服務器內容
var tip = ajax.responseText;
//獲取圖片路徑 然后進行放入td中
var img = document.createElement("img");
img.src = tip;
img.style.width = "14px";
img.style.height = "14px";
var td = document.getElementById("show");
td.innerHTML = "";
td.appendChild(img);
}
}
}
}
}
</script>
</html>然后編寫服務端,接收輸入的信息，判斷是否與驗證碼相互匹配,將對應的圖片的路徑以輸出流的方式輸出
public class CheckcodeServlet extends HttpServlet {
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
//圖片路徑
String tip = "images/MsgError.gif";
String checkcode = req.getParameter("checkcode");
//測試
System.out.println(checkcode);
//獲取session域中的數字
String checkcodeService = (String) req.getSession().getAttribute("CHECKNUM");
//判斷
if (checkcode.equals(checkcodeService)) {
tip = "images/MsgSent.gif";
}
//輸出路徑
PrintWriter pw = resp.getWriter();
pw.write(tip);
pw.flush();
pw.close();
}
}當輸入第4個數字的時候就會出現提示
運行結果:
以上就是使用ajax怎么實現一個驗證碼功能，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
