html:
<div class="register-input">
<span>驗證碼:</span>
<input type="text" id="check" name="check-codeText" class="check" placeholder="輸入驗證碼" maxlength="4">
<img class="check-codeImg" alt="" onclick="changeCode(this)" src="https://bbs.csdn.net/topics/CheckCode" >
<script type="text/javascript">
//圖片點擊事件
function changeCode(img) {
console.log(img);
img.src="https://bbs.csdn.net/topics/CheckCode?" + new Date().getTime();
}
</script>
</div>
后臺程式
@WebServlet("/CheckCode")
public class CheckCodeServlet extends HttpServlet {
// 隨機種子
Random random = new Random();
//設定驗證碼的文本
//在記憶體中創建一個長80,寬30的圖片
String sRand="";
int width=180, height=30;
BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
//獲取畫筆
Graphics g = image.getGraphics();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//服務器通知瀏覽器不要快取
resp.setHeader("expires","0");
resp.setHeader("pragma","no-cache");
resp.setHeader("cache-control","no-cache");
//設定畫筆顏色為灰色
g.setColor(Color.WHITE);
//填充圖片
g.fillRect(0,0, width,height);
//設定字體的小大
// g.setFont(new Font("微軟雅黑",Font.BOLD,18));
//產生4個隨機驗證碼,12Ey
// String checkCode = ChCompute();
String checkCode = ChCompute();
//將驗證碼放入HttpSession中
HttpSession session = req.getSession(true);
//設定session使其進行效驗
req.getSession().setAttribute("CHECKCODE_SERVER",checkCode);
session.setAttribute("validate",sRand);
//這個方法將釋放該實體所占用的所有資源,銷毀自身.
g.dispose();
//向圖片上寫入驗證碼
// g.drawString(checkCode,15,25);
//將記憶體中的圖片輸出到瀏覽器
//引數一:圖片物件
//引數二:圖片的格式,如PNG,JPG,GIF
//引數三:圖片輸出到哪里去
ImageIO.write(image,"png",resp.getOutputStream());
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
super.doGet(req, resp);
}
// 英文字符加數字的驗證碼
public void letterAndNumber(){
String[] letter = { "A", "B", "C", "D", "E", "F", "G", "H", "I", "J",
"K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V",
"W", "X", "Y", "Z" };
for (int i = 0; i < 4; i++) {
String tempRand = "";
//nextBoolean() 方法用于從該亂數生成器的序列得到下一個偽均勻分布的布林值。
if (random.nextBoolean()) {
//帶參的nextInt(int x)則會生成一個范圍在0~x(不包含X)內的任意正整數
tempRand = String.valueOf(random.nextInt(10));
} else {
tempRand = letter[random.nextInt(25)];
if (random.nextBoolean()) {// 隨機將該字母變成小寫
tempRand = tempRand.toLowerCase();
}
}
sRand += tempRand;
}
}
//中文 肆+?=24
public String ChCompute(){
String[] cn = { "壹", "貳", "叁", "肆", "伍", "陸", "柒", "捌", "玖", "拾" };
String value = null;
int x = random.nextInt(10) + 1;
int y = random.nextInt(30);
sRand = String.valueOf(y);
g.setFont(new Font("楷體", Font.PLAIN, 25));// 設定字體
g.setColor(new Color(255,68,0));
g.drawString(cn[x - 1], 30 + 6, 25);
g.drawString("+", 63, 25);
g.drawString("?", 80, 25);
g.drawString("=", 100, 25);
g.drawString(String.valueOf(x + y), 120, 25);
value = String.valueOf(y);
System.out.println(value);
return value;
}
}
js頁面
function registerFormCheck() {
console.log(123)
//1.發送資料到服務器
if (checkUsername() && checkPassword() && checkEmail() && NotNull() &&checkCode()){
//校驗成功 ---> 發送資料
$.post("registerUserServlet", $("#registerForm").serialize(), function (data) {
console.log(data);
//處理服務器回應的資料
if (data.flag){
console.log("注冊成功");
}else {
console.log("注冊失敗");
}
})
}
//2.跳轉頁面
return false;
}
求解,為啥每次只有重啟服務器了頁面上的驗證碼圖片才會改變,單擊圖片沒有用,但是后臺會回應,并且測驗了驗證碼已經改變了,就是頁面上的圖片不會更新。
uj5u.com熱心網友回復:
求大神,幫忙,困擾一天了
uj5u.com熱心網友回復:
點擊事件那里改成 "CheckCode?v=" 試試呢轉載請註明出處,本文鏈接:https://www.uj5u.com/qianduan/84312.html
標籤:其他
