ajax怎麼實現驗證碼-js教程-PHP中文網

首頁

web前端

js教程

ajax怎麼實現驗證碼

php中世界最好的语言

Mar 30, 2018 pm 05:16 PM

ajax 怎麼驗證

這次帶給大家ajax怎麼實現驗證碼，ajax實現驗證碼的注意事項有哪些，下面就是實戰案例，一起來看一下。

本文實例為大家分享了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個數字的時候就會出現提示
運行結果:

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7808

Java教學

1646

CakePHP 教程

1402

Laravel 教程

1300

PHP教程

1236

Related knowledge

如何在PDF中驗證簽名 Feb 18, 2024 pm 05:33 PM

我們通常會接收到政府或其他機構發送的PDF文件，有些文件有數位簽章。驗證簽名後，我們會看到SignatureValid訊息和一個綠色勾號。如果簽章未驗證，會顯示有效性未知。驗證簽名很重要，以下看看如何在PDF中進行驗證。如何在PDF中驗證簽名驗證PDF格式的簽名使其更可信，文件更容易被接受。您可以透過以下方式驗證PDF文件中的簽名。在AdobeReader中開啟PDF右鍵點選簽名，然後選擇顯示簽名屬性點選顯示簽署者憑證按鈕從「信任」標籤將簽名新增至「受信任的憑證」清單中點選驗證簽名以完成驗證讓

微信好友輔助驗證解封的詳細方法 Mar 25, 2024 pm 01:26 PM

1.打開微信進入後，點選搜尋圖標，輸入微信團隊，點選下方的服務進入。 2、進入後，點選左下方的自助工具的選項。 3、點選後，在上方的選項內，點選解封/申訴輔助驗證的選項。

解決jQuery AJAX請求遇到403錯誤的方法 Feb 20, 2024 am 10:07 AM

標題：解決jQueryAJAX請求出現403錯誤的方法及程式碼範例403錯誤是指伺服器禁止存取資源的請求，通常會導致出現這個錯誤的原因是請求缺少權限或被伺服器拒絕。在進行jQueryAJAX請求時，有時會遇到這種情況，本文將介紹如何解決這個問題，並提供程式碼範例。解決方法：檢查權限：首先要確保請求的URL位址是正確的，同時驗證是否有足夠的權限來存取該資

PHP 與 Ajax：建立一個自動完成建議引擎 Jun 02, 2024 pm 08:39 PM

使用PHP和Ajax建置自動完成建議引擎：伺服器端腳本：處理Ajax請求並傳回建議(autocomplete.php)。客戶端腳本：發送Ajax請求並顯示建議(autocomplete.js)。實戰案例：在HTML頁面中包含腳本並指定search-input元素識別碼。

解決jQuery AJAX請求403錯誤的方法 Feb 19, 2024 pm 05:55 PM

jQuery是一個受歡迎的JavaScript函式庫，用來簡化客戶端端的開發。而AJAX則是在不重新載入整個網頁的情況下，透過發送非同步請求和與伺服器互動的技術。然而在使用jQuery進行AJAX請求時，有時會遇到403錯誤。 403錯誤通常是伺服器禁止存取的錯誤，可能是由於安全性原則或權限問題導致的。在本文中，我們將討論如何解決jQueryAJAX請求遭遇403錯誤

PHP 8 新功能：增加了驗證和簽名 Mar 27, 2024 am 08:21 AM

PHP8是PHP的最新版本，為程式設計師帶來了更多的便利性和功能。這個版本特別關注安全性和效能，其中一個值得注意的新功能是增加了驗證和簽章功能。在本文中，我們將深入了解這些新的功能及其用途。驗證和簽名是電腦科學中非常重要的安全概念。它們通常用於確保傳輸的數據是完整和真實的。在處理線上交易和敏感資訊時，驗證和簽名變得尤為重要，因為如果有人能夠篡改數據，可能會對

如何解決jQuery AJAX報錯403的問題？ Feb 23, 2024 pm 04:27 PM

如何解決jQueryAJAX報錯403的問題？在開發網頁應用程式時，經常會使用jQuery來發送非同步請求。然而，有時在使用jQueryAJAX時可能會遇到錯誤代碼403，表示伺服器禁止存取。這種情況通常是由伺服器端的安全性設定所導致的，但可以透過一些方法來解決這個問題。本文將介紹如何解決jQueryAJAX報錯403的問題，並提供具體的程式碼範例。一、使

如何使用Ajax從PHP方法取得變數？ Mar 09, 2024 pm 05:36 PM

使用Ajax從PHP方法取得變數是Web開發中常見的場景，透過Ajax可以實作頁面無需刷新即可動態取得資料。在本文中，將介紹如何使用Ajax從PHP方法中取得變量，並提供具體的程式碼範例。首先，我們需要寫一個PHP檔案來處理Ajax請求，並傳回所需的變數。下面是一個簡單的PHP檔案getData.php的範例程式碼：

See all articles

ajax怎麼實現驗證碼

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

Video Face Swap

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題