AJAX驗證碼檢查

時間 2019-11-21

標籤 ajax 驗證碼檢查欄目 Ajax 简体版

原文原文鏈接

前言

對於驗證碼檢查咱們並不會陌生，咱們在學習Session的時候已經使用過了驗證碼檢查了。詳細可參考：http://blog.csdn.net/hon_3y/article/details/54799494#t11javascript

咱們當時是同步檢查驗證碼是否正確的，其實沒有必要。由於就驗證一個輸入框的數據，不必使用同步的方式驗證【使用異步對用戶體驗更加友好】html

分析

當用戶輸入完4位數字的時候，就去服務器端驗證是否須要相同，若是相同，那麼返回一個打鉤的圖片。若是不一樣，那麼就返回一個打叉的圖片java

前臺分析

綁定鍵盤輸入事件
當輸入數達到4的時候，就與服務器交互
獲得服務器帶過來的圖片，使用DOM添加到對應的位置

後臺分析

獲得前臺帶過來的值
判斷該值與Session保存的是否相同
根據判斷值返回對應的圖片

編寫JSP

值得注意的是：要獲取td定義的id，外邊必定要套上table標籤。。。我在剛開始寫的時候，是沒有table標籤的。而後死活得不到td的標籤….很煩…ajax

<%-- Created by IntelliJ IDEA. User: ozc Date: 2017/5/17 Time: 20:52 To change this template use File | Settings | File Templates. --%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>驗證碼校驗</title>
    <script type="text/javascript" src="js/ajax.js"></script>
</head>
<body>


<%--###################展現頁面#############################--%>

<table>
    <tr>
        <td>驗證碼：</td>
        <td><input type="text" id="checkCode" name="checkCode"></td>
        <td><img src="01_image.jsp"/></td>
        <td id="result"></td>
    </tr>
</table>


<%--###################去除空格方法#############################--%>
<script type="text/javascript"> function trim(str) { //去除左邊的空格 str.replace("/^\s*/", ""); //去除右邊的空格 str.replace("/\s*$/", ""); return str; } </script>


<%--###################綁定鍵盤事件#############################--%>

<script type="text/javascript"> document.getElementById("checkCode").onkeyup = function () { //獲得輸入框的內容，把的先後空格都去除 var keyValue = this.value; keyValue = trim(keyValue); /*******************ajax代碼*******************************/ if (keyValue.length == 4) { var ajax = createAJAX(); var method = "post"; var url = "${pageContext.request.contextPath}/CheckCodeServlet?time=" + new Date().getTime(); ajax.open(method, url); ajax.setRequestHeader("content-type", "application/x-www-form-urlencoded"); ajax.send("keyValue=" + keyValue); /*******************ajax回調函數*******************************/ ajax.onreadystatechange = function () { if (ajax.readyState == 4) { if (ajax.status == 200) { //獲得服務器帶過來的數據 var tip = ajax.responseText; /*******************使用DOM把數據添加到頁面上*******************************/ var img = document.createElement("img"); img.src = tip; img.style.width = "14px"; img.style.height = "14px"; var td = document.getElementById("result"); td.innerHTML = ""; td.appendChild(img); } } }; }else { //清空圖片 var td = document.getElementById("result"); td.innerHTML = ""; } }; </script>


</body>
</html>

處理請求的Servlet

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 java.io.IOException;
import java.io.PrintWriter;

/** * Created by ozc on 2017/5/17. */
@WebServlet(name = "CheckCodeServlet",urlPatterns = "/CheckCodeServlet")
public class CheckCodeServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //獲得帶過來的數據
        String keyValue = request.getParameter("keyValue");
        //獲得Session中的數據
        String checkCodeInSession = (String) request.getSession().getAttribute("CHECKNUM");
        response.setContentType("text/html;charset=UTF-8");

        String src = "images/MsgError.gif";

        //判斷倆數據是否相同
        if (keyValue.equals(checkCodeInSession)) {
            src = "images/MsgSent.gif";
        }
        PrintWriter writer = response.getWriter();
        writer.write(src);

        writer.flush();
        writer.close();


    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);

    }
}