JS局部刷新圖形驗證碼

開發(fā)過程當中,網(wǎng)絡(luò)安全采取的方法之一,采用驗證碼功能。一般在注冊、登錄的程序當中見得比較多。其自己在實現(xiàn)這一功能時,靜態(tài)頁面有一段調(diào)用圖形驗證碼的PHP文件,//<img src=’imgcode.php’id=’imgcode’/>,驗證碼是隨機生成的,一般將生成的驗證碼存入到SESSION當中,以便入其它相關(guān)驗證操作,由于反應(yīng)到客戶端的圖形驗證碼帶有一些雜點,顯示時難免會有一點視覺上的干攏,看不清完整的驗證碼,這時得提供一個刷新驗證碼的功能,以重新生成驗證碼??紤]不通過刷新整個頁面來達到這個效果,采用AJAX重新生成驗證碼時,發(fā)現(xiàn)SESSION值改變了,客戶端修改圖片的src屬性,給它重新賦值卻無任何變化,請求響應(yīng)后,js代碼:

1.var img_obj =??document.getElementById('imgcode');

2.img_obj.src = 'imgcode.php';

3.return;

顯然顯示在客戶端上的圖形驗證碼和服務(wù)器上的沒有得到統(tǒng)一更新。那么在驗證操作時,將不可能得到正確地驗證。

原因是由于瀏覽器的緩存問題,如果兩次都是同樣的值(src=’imgcode.php’),瀏覽器一般都不會刷新,所以需要給圖片連接動一點手腳。將img_obj.src =’imgcode.php’; 改成

1.img_obj.src = 'imgcode.php?timeamp=' + new Date().getTime();

2,也可以直接寫成這樣://<img src=”../vdimgck.php” id=”vdimgck” onclick=”javascript:this.src=this.src+’?rnd=’ + Math.random();” alt=”" title=”看不清,點擊刷新”/>

加上一個時間值,或是在后面加上一串隨機數(shù)字,只要保證總是重新刷新即可,再次運行,成功達到局部刷新功能!

其中的AJAX代碼,php生成圖形驗證碼的程序代碼,網(wǎng)上搜一搜,會有很多,這里就不分享啦。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 開發(fā)過程當中,網(wǎng)絡(luò)安全采取的方法之一,采用驗證碼功能。一般在注冊、登錄的程序當中見得比較多。其自己在實現(xiàn)這一功能時...
    Leslie_2386閱讀 479評論 0 0
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,131評論 2 17
  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理,服務(wù)發(fā)現(xiàn),斷路器,智...
    卡卡羅2017閱讀 136,609評論 19 139
  • Android 自定義View的各種姿勢1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,139評論 25 708
  • 結(jié)構(gòu)化思維是極其重要的。我曾經(jīng)看到一篇文章說,“結(jié)構(gòu)化思維讓你受益三生三世”。然而,很多人卻并不具備結(jié)構(gòu)化思維的能...
    傲看今朝閱讀 1,779評論 2 22

友情鏈接更多精彩內(nèi)容