22 July 2011
在前一篇筆記有提到如何利用plugin去顯示一個驗證碼(captcha)的功能,

而這篇是要教導大家如何用另一種方法(AJAX API)去顯示驗證碼,

***記得*** 一樣要去申請api key,至於如何申請,請至前一篇檢閱。

而使用AJAX API的優點,簡單來說,你在你的.jsp, .asp, .php....etc的頁面中,

不會看到該language的語法,例如:<% %> <? ?>, ...等等之類的。

我們只要用簡單的javascript語法就可以顯示一個驗證碼。
首先我們得在我們頁面中,這裡假設是captcha.html中,

【第一步】加入 Google的js檔案,如下:
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>



【第二步】在captcha.html中加入一個div的element,如下:
<div id="captcha"></div>



【第三步】開始create一個驗證碼,請加入下列javascript語法:
<script>
window.onload = function() {
Recaptcha.create(
"xxxxxxx", //你的api key
"captcha", //第二步驟中div的id
{
theme: "red",
callback: Recaptcha.focus_response_field
}
);

}
</script>



這樣就大功告成,至於如何驗證,
其實驗證方式也是有兩種,
兩種都是透過ajax,
第一種是寫一隻程式,這隻程式是用來接收參數並且驗證資料
並且用ajax向這隻程式傳遞參數。可以參考我前一篇的驗證方法

而第二種是直接向此連結http://www.google.com/recaptcha/api/verify發出request,
但是大概懂ajax的人都知道""基本上""是無法跨domain進行request,
當然有其他solution,但因為我先前已經有寫好上個方法的驗證方法,
所以我就直接用第一種方式,也較簡易!
但是還是建議大家直接用第二種方式,不然使用ajax api就失去了意義!

而這篇是教導大家如何using ajax api去顯示一個驗證碼。
所以就不詳細說明如何利用ajax去進行驗證。(反正用jQuery的ajax api很簡單,就不贅述了!)


















blog comments powered by Disqus