IT兄弟連 JavaWeb教程 jQuery對AJAX的支持經典案例

時間 2019-12-07

標籤兄弟 javaweb 教程 jquery ajax 支持經典案例欄目 Java 简体版

原文原文鏈接

案例需求：編寫用戶登錄頁面的驗證碼模塊，在用戶進行登錄時，輸入驗證碼後不須要點擊提交按鈕，使用AJAX異步地向服務器發送驗證驗證碼的請求。若是驗證碼正確，能夠點擊提交按鈕，若是驗證碼輸入錯誤，提示用戶。若是用戶看不清驗證碼，點擊驗證碼還能夠刷新出新的驗證碼。javascript

案例實現：html

驗證碼原理：當頁面請求一個驗證碼的Servlet時，這個Servlet會把數據以圖片的形式傳給客戶端，並把數據以字符串的形式存入了session中。當用戶以圖片爲標準輸入對應的驗證碼併發送給對應的用來驗證驗證碼的Servlet時，驗證驗證碼的Servlet收到用戶輸入的數據，並從session取出對應的驗證碼字符進行驗證便可。java

● 定義向客戶端發送驗證碼的Servlet。詳細代碼以下：jquery

package com.xdl.servlet;ajax

import com.sun.image.codec.jpeg.JPEGCodec;json

import com.sun.image.codec.jpeg.JPEGImageEncoder;瀏覽器

import javax.servlet.ServletException;服務器

import javax.servlet.annotation.WebServlet;session

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>

<title>Title</title>

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>

</body>

</html>

目前所有的代碼已經編寫完成，咱們打開Tomcat服務器，在瀏覽器中輸入http://localhost:8080/checkcode/login.html。瀏覽器將出現如圖2所示的頁面。

此時是沒法點擊登錄按鈕的，由於咱們的驗證碼沒有經過驗證，如今咱們輸入正確的驗證碼，而後將鼠標移出驗證碼輸入框。