<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script src="http://static.geetest.com/static/tools/gt.js"></script>

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script> 
<script src="https://static.geetest.com/static/tools/gt.js"></script>

$.ajax({ 
 // 獲取id，challenge，success（是否啟用failback） 
 url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // 加隨機(jī)數(shù)防止緩存 
 type: "get", 
 dataType: "json", 
 success: function (data) { 
  // 使用initGeetest接口 
  // 參數(shù)1：配置參數(shù) 
  // 參數(shù)2：回調(diào)，回調(diào)的第一個(gè)參數(shù)驗(yàn)證碼對(duì)象，之后可以使用它做appendTo之類(lèi)的事件 
  initGeetest({ 
   gt: data.gt, 
   challenge: data.challenge, 
   product: "popup", // 產(chǎn)品形式，包括：float，embed，popup。注意只對(duì)PC版驗(yàn)證碼有效 
   offline: !data.success // 表示用戶(hù)后臺(tái)檢測(cè)極驗(yàn)服務(wù)器是否宕機(jī)，與SDK配合，用戶(hù)一般不需要關(guān)注 
  }, handlerPopup); 
 } 
});

// 代碼詳細(xì)說(shuō)明 
var handlerPopup = function (captchaObj) { 
 // 注冊(cè)提交按鈕事件，比如在登陸頁(yè)面的登陸按鈕 
 $("#popup-submit").click(function () { 
  // 此處省略在登陸界面中，獲取登陸數(shù)據(jù)的一些步驟 
   
  // 先校驗(yàn)是否點(diǎn)擊了驗(yàn)證碼 
  var validate = captchaObj.getValidate(); 
  if (!validate) { 
   alert('請(qǐng)先完成驗(yàn)證！'); 
   return; 
  } 
  // 提交驗(yàn)證碼信息，比如登陸頁(yè)面，你需要提交登陸信息，用戶(hù)名和密碼等登陸數(shù)據(jù) 
  $.ajax({ 
   url: "../web/VerifyLoginServlet.php", 
   type: "post", 
   // dataType: "json", 
   data: { 
    // 用戶(hù)名和密碼等其他數(shù)據(jù)，自己獲取，不做演示 
    username:username, 
    password:password, 
    // 驗(yàn)證碼數(shù)據(jù)，這些數(shù)據(jù)不用自己獲取 
    // 這是二次驗(yàn)證所需的三個(gè)值 
    // 當(dāng)然，你也可以直接設(shè)置驗(yàn)證碼單獨(dú)校驗(yàn)，省略其他信息 
    geetest_challenge: validate.geetest_challenge, 
    geetest_validate: validate.geetest_validate, 
    geetest_seccode: validate.geetest_seccode 
   }, 
   // 這里是正確返回處理結(jié)果的處理函數(shù) 
   // 假設(shè)你就返回了1，2，3 
   // 當(dāng)然，正常情況是返回JSON數(shù)據(jù) 
   success: function (result) { 
    // 1表示驗(yàn)證碼驗(yàn)證失敗 
    if (result == "1") { 
     alert("驗(yàn)證碼驗(yàn)證失??！"); 
    }else if (result == "2") { 
     alert("用戶(hù)名或密碼錯(cuò)誤！"); 
    }else if (result == "3") { 
     alert("登陸成功！"); 
     // 登陸成功了，可以在這里做其他處理 
    }else{ 
     alert("登陸錯(cuò)誤！"); 
    } 
   } 
  }); 
 }); 
 // 彈出式需要綁定觸發(fā)驗(yàn)證碼彈出按鈕 
 // 比如在登陸頁(yè)面，這個(gè)觸發(fā)按鈕就是登陸按鈕 
 captchaObj.bindOn("#popup-submit"); 
  
 // 將驗(yàn)證碼加到id為captcha的元素里 
 // 驗(yàn)證碼將會(huì)在下面指定的元素中顯示出來(lái) 
 captchaObj.appendTo("#popup-captcha"); 
 // 更多接口參考：http://www.geetest.com/install/sections/idx-client-sdk.html 
};