利用ajax異步校驗驗證碼（轉）

阿新 • • 發佈：2018-02-13

left 獲取 track eth tco lds dsm sta source

利用ajax異步校驗驗證碼

技術分享圖片

示例結果如圖所示

具體步驟如下：

step1:

jsp頁面及js腳本

[html] view plain copy print?

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %>
<html>
<head>
<title>form</title>
<script type="text/javascript" src="<%=request.getContextPath()%>/js/my.js"

></script>
<script type="text/javascript">
//檢查用戶名是否存在
function check_username(){
//step1,獲得ajax對象
var xhr = getXhr();
var username = $V(‘userrname‘);
//step2,使用ajax對象發請求(get/post)
xhr.open(‘get‘,‘checkUsername?username

=‘+username,true);
//step3,編寫服務器端的處理程序
//step4,編寫事件處理函數
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//服務器訪問正常
var txt

= xhr.responseText;
$(‘check_msg‘).innerHTML = txt;
}else{
$(‘check_msg‘).innerHTML = ‘驗證出錯‘;
}
}
};
$(‘check_msg‘).innerHTML = ‘正在驗證‘;
xhr.send(null);
}
//檢查驗證碼是否正確
function check_number(){
var xhr = getXhr();
var code = $V(‘code‘);
xhr.open(‘get‘,‘checkNumber?code=‘+code,true);
xhr.onreadystatechange = function(){
if(xhr.readyState==4){
if(xhr.status==200){
//服務器訪問正常
var txt = xhr.responseText;
$(‘code_msg‘).innerHTML = txt;
}else{
$(‘code_msg‘).innerHTML = ‘驗證出錯‘;
}
}
};
$(‘code_msg‘).innerHTML = ‘正在驗證‘;
xhr.send(null);
}
</script>
</head>
<body>
<form action="" method="post">
<fieldset>
<legend>登陸</legend>
用戶名：<input id="userrname" name="username" onblur="check_username();">
<span id="check_msg" style="color:red;"></span><br/>
密碼：<input name="pwd" type="password"><br/>
驗證碼：<img id="image" src="checkcode" onclick="this.src=‘checkcode?‘+(new Date()).getTime()">
<a href="javascript:;" onclick="$(‘image‘).src=‘checkcode?‘+(new Date()).getTime()">換一張</a>
<input id="code" name="code" onblur="check_number();"/><span id="code_msg" style="color:red;"></span><br/>
<input type="submit" value="提交"><br/>
</fieldset>
</form>
</body>
</html>

<%@page pageEncoding="utf-8" contentType="text/html; charset=utf-8" %><html>    <head>        <title>form</title>        <script type="text/javascript" src="<%=request.getContextPath()%>/js/my.js"></script>        <script type="text/javascript">            //檢查用戶名是否存在            function check_username(){                //step1,獲得ajax對象                var xhr = getXhr();                var username = $V(‘userrname‘);                //step2,使用ajax對象發請求(get/post)                xhr.open(‘get‘,‘checkUsername?username=‘+username,true);                //step3,編寫服務器端的處理程序                //step4,編寫事件處理函數                xhr.onreadystatechange = function(){                    if(xhr.readyState==4){                        if(xhr.status==200){                            //服務器訪問正常                            var txt = xhr.responseText;                            $(‘check_msg‘).innerHTML = txt;                        }else{                            $(‘check_msg‘).innerHTML = ‘驗證出錯‘;                        }                    }                };                $(‘check_msg‘).innerHTML = ‘正在驗證‘;                xhr.send(null);            }            //檢查驗證碼是否正確            function check_number(){                var xhr = getXhr();                var code = $V(‘code‘);                xhr.open(‘get‘,‘checkNumber?code=‘+code,true);                xhr.onreadystatechange = function(){                    if(xhr.readyState==4){                        if(xhr.status==200){                            //服務器訪問正常                            var txt = xhr.responseText;                            $(‘code_msg‘).innerHTML = txt;                        }else{                            $(‘code_msg‘).innerHTML = ‘驗證出錯‘;                        }                    }                };                $(‘code_msg‘).innerHTML = ‘正在驗證‘;                xhr.send(null);            }        </script>    </head>    <body>        <form action="" method="post">            <fieldset>                <legend>登陸</legend>                <!--  <a href="javascript:;" onclick="alert(getXhr())">測試獲取ajax對象</a> -->                用戶名：<input id="userrname" name="username" onblur="check_username();">                <span id="check_msg" style="color:red;"></span><br/>                密碼：<input name="pwd" type="password"><br/>                驗證碼：<img id="image" src="checkcode" onclick="this.src=‘checkcode?‘+(new Date()).getTime()">                <a href="javascript:;" onclick="$(‘image‘).src=‘checkcode?‘+(new Date()).getTime()">換一張</a>                <input id="code" name="code" onblur="check_number();"/><span id="code_msg" style="color:red;"></span><br/>                <input type="submit" value="提交"><br/>            </fieldset>        </form>    </body></html>

my.js代碼：封裝的幾個常用函數

[javascript] view plain copy print?

//根據id獲取節點
function $(id){
return document.getElementById(id);
}
//根據id獲取節點的值
function $V(id){
return $(id).value;
}
//獲取ajax對象
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject(‘Microsoft.XMLHttp‘)
}
return xhr;
}

//根據id獲取節點function $(id){    return document.getElementById(id);}//根據id獲取節點的值function $V(id){    return $(id).value;}//獲取ajax對象function getXhr(){    var xhr = null;    if(window.XMLHttpRequest){        xhr = new XMLHttpRequest();    }else{        xhr = new ActiveXObject(‘Microsoft.XMLHttp‘)    }    return xhr;}

具體細節見代碼

利用ajax異步校驗驗證碼（轉）

left 獲取 track eth tco lds dsm sta source 利用ajax異步校驗驗證碼示例結果如圖所示具體步驟如下：step1:jsp頁面及js腳本[html] view plain copy print?<%@page pageEncoding

利用阿里大於傳送簡訊驗證碼（java）

由於業務需求，需要傳送簡訊驗證，於是搗鼓了一上午，也在網上看了別人的案例，現整理分享下。一、登陸阿里大於平臺配置相關資訊點選阿里大於的官網：https://www.alidayu.com/ ，出現如下介面，然後點選管理中心，使用淘寶賬號登陸。

python 模擬知乎登錄，包含驗證碼（轉）

mozilla log 5.0 color att pos head one 成功 #!/usr/bin/env python3 # -*- coding: utf-8 -*- ‘‘‘ Required - requests (必須) - pillow (可選) Info

利用Ajax實現輸入完驗證碼之後直接判斷驗證碼是否正確

生成驗證碼的Servlet： package com.muke; //生成驗證碼； import java.awt.Color; import java.awt.Graphics; import java.awt.image.BufferedImage; import ja

Selenium2+python自動化41-繞過驗證碼（add_cookie）

option html exp 需要輸入操作 true .cn selenium 前言驗證碼這種問題是比較頭疼的，對於驗證碼的處理，不要去想破解方法，這個驗證碼本來就是為了防止別人自動化登錄的。如果你能破解，說明你們公司的驗證碼嗎安全級別不高，那就需要提高級別了。對

python 驗證碼（二）連通域分割

pass 技術 def cep get() style box 垂直 -c 切割前：　　　　切割後：　　　　　　　　代碼： #-*-coding:utf-8-*- from PIL import Image import queue

驗證碼（隨機數）

package demo; import java.util.Random; public class RandomDemo { public static void main(String[] args) { // TODO Auto-generated

使用 Python 生成驗證碼（CAPTCHA）

CAPTCHA 影象 Python 資料視覺化程式設計實戰程式碼點選檢視詳細內容 from PIL import Image, ImageDraw, ImageFont import random import string class SimpleCaptchaException(Exce

生成四位驗證碼（字串）

一：用字串輸出四位驗證碼 1.先輸出定義的字串 $str = "abcdefghjklmnopqrstuvwxyz0123456789"; 思路是從上邊的字串中隨機抽取四個數運用函式substr a：echo substr($str,-5);//輸出56789

製作JS驗證碼（簡易）

源文地址：https://www.cnblogs.com/tutoo/p/4048736.html 本文只記錄自我的理解過程，附加上一些些自己的註釋 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <met

JavaWeb學習（六）HttpServletResponse基本應用——生成驗證碼（5）

一、程式碼： package com.servlet.study; import java.awt.Color; import java.awt.Font; import java.awt.Graphics2D; import java.awt.image.BufferedImage; imp

java生成隨機驗證碼（ASCII）

最近做的一些東西，在做請求時，要偽造一些隨機碼，所以就寫了個方法，網上實現也比較多，這裡只是提供自己的這個相對來說比較簡單，主要是看實現思路，主要是利用java的 Random類 1. 只生成數字驗證碼因為是用於驗證碼，所以首位為0也是可以的，單純的用random.nextIn

原生JS製作驗證碼（優化）

<!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題文件</title> </head> <body> 請輸入驗證碼:<inp

原生JS制作驗證碼（優化）

set type function ons int value == span 標題 <!doctype html> <html> <head> <meta charset="utf-8"> <title>無標題

Confluence 6 配置驗證碼（Captcha）來防止垃圾

如果你的 Confluence 站點是對公眾開放的（允許匿名使用者使用，新增評論，建立頁面等），你可能會發現你的站點會被自動建立很多垃圾頁面，評論或者其他垃圾內容。你可以配置讓 Confluence 通過確定新增內容的人為真正的使用者而不是機器來確定內容是否是垃圾內容：建立一個賬戶新增一個評論

Python OCR識別圖片驗證碼（一）

歡迎加入學習交流QQ群：657341423 對於某些網站登入的時候，往往需要輸入驗證碼才能實現登入。如果要爬蟲這類網站，往往總會比這個驗證碼導致無法爬取資料。以下介紹一種比較折中的方法，也是比較可行的方法：實現思想： 1、通過截圖獲取驗證碼圖片，為什麼要截圖

Java利用QR Code生成二維碼（一）

需要的jar包分別是：core-2.2.jar、javase-2.2.jar <dependency> <groupId>com.google.zxing</groupId> <artifactId>core</

圖形驗證碼（基礎）

.com 探測 src str 登錄 key width req 顏色一、生成圖形驗證碼　　1、根據隨機數生成圖片　　2、將隨機數存儲到session中　　3、將生成的圖片寫到接口的響應中　　基類： package com.nxz.security.

IOS推送之PHP代碼（轉）

推送消息獲取 option code bsp 包含 connect 手機 pan 準備工作 1.獲取手機註冊應用的deviceToken（iphone手機註冊應用時返回唯一值deviceToken） 2.獲取ck.pem文件（做手機端的給） 3.獲取pass phrase

PHP PC端微信掃碼支付【模式二】詳細教程-附帶源碼（轉）

idt class pid 方法按鈕 -c 商戶開源玩意兒博主寫這破玩意兒的時候花了大概快兩天時間才整體的弄懂邏輯，考慮了一下~還是把所有代碼都放出來給大家~抱著開源大無私的精神！誰叫我擅長拍黃片呢？同時也感謝我剛入行時候那些無私幫過我的程序員們！首先還是

利用ajax異步校驗驗證碼（轉）

相關推薦