當前位置：首頁 > 编程语言 > java >内容正文

java

IT兄弟连 JavaWeb教程 jQuery对AJAX的支持经典案例

發布時間：2024/9/21 java 35 豆豆

生活随笔收集整理的這篇文章主要介紹了 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的支持经典案例的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Requests请求库
下一篇： java美元兑换,（Java实现）美元