拖动图片验证

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

<div id="popup-captcha"></div>



var handlerPopup = function(captchaObj) { 
    // 成功的回调 
    captchaObj.onSuccess(function() { 
        var validate = captchaObj.getValidate(); 
        $.ajax({ 
            url: "web/VerifyLoginServlet.php", // 进行二次验证 
            type: "post", 
            dataType: "json", 
            data: { 
                type: "pc", 
                username: $('#username1').val(), 
                password: $('#password1').val(), 
                geetest_challenge: validate.geetest_challenge, 
                geetest_validate: validate.geetest_validate, 
                geetest_seccode: validate.geetest_seccode 
            }, 
            success: function(data) { 
                if (data && (data.status === "success")) { 
                    $(document.body).html('<h1>登录成功</h1>'); 
                } else { 
                    $(document.body).html('<h1>登录失败</h1>'); 
                } 
            } 
        }); 
    }); 
    $("#popup-submit").click(function() { 
        captchaObj.show(); 
    }); 
    // 将验证码加到id为captcha的元素里 
    captchaObj.appendTo("#popup-captcha"); 
 
}; 
// 验证开始需要向网站主后台获取id，challenge，success（是否启用failback） 
$.ajax({ 
    url: "web/StartCaptchaServlet.php?type=pc&t=" + (new Date()).getTime(), // 加随机数防止缓存 
    type: "get", 
    dataType: "json", 
    success: function(data) { 
        // 使用initGeetest接口 
        // 参数1：配置参数 
        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 
        initGeetest({ 
            gt: data.gt, 
            challenge: data.challenge, 
            product: "popup", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 
            offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注 
        }, handlerPopup); 
    } 
});






<div id="embed-captcha"></div> 
<p id="wait" class="show">正在加载验证码......</p> 
<p id="notice" class="hide">请先拖动验证码到相应位置</p> 
<input class="btn" id="embed-submit" type="submit" value="提交">

var handlerEmbed = function(captchaObj) { 
    $("#embed-submit").click(function(e) { 
        var validate = captchaObj.getValidate(); 
        if (!validate) { 
            $("#notice")[0].className = "show"; 
            setTimeout(function() { 
                $("#notice")[0].className = "hide"; 
            }, 2000); 
            e.preventDefault(); 
        } 
    }); 
    // 将验证码加到id为captcha的元素里，同时会有三个input的值：geetest_challenge, geetest_validate, geetest_seccode 
    captchaObj.appendTo("#embed-captcha"); 
    captchaObj.onReady(function() { 
        $("#wait")[0].className = "hide"; 
    }); 
 
}; 
$.ajax({ 
    // 获取id，challenge，success（是否启用failback） 
    url: "web/StartCaptchaServlet.php?type=pc&t=" + (new Date()).getTime(), // 加随机数防止缓存 
    type: "get", 
    dataType: "json", 
    success: function(data) { 
        // 使用initGeetest接口 
        // 参数1：配置参数 
        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 
        initGeetest({ 
            gt: data.gt, 
            challenge: data.challenge, 
            product: "embed", // 产品形式，包括：float，embed，popup。注意只对PC版验证码有效 
            offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注 
        }, handlerEmbed); 
    } 
});



<input class="btn" id="popup-submit-mobile" type="submit" value="提交"> 
<div id="mask"></div> 
<div id="popup-captcha-mobile"></div>

$("#mask").click(function() { 
    $("#mask, #popup-captcha-mobile").hide(); 
}); 
$("#popup-submit-mobile").click(function() { 
    $("#mask, #popup-captcha-mobile").show(); 
}); 
var handlerPopupMobile = function(captchaObj) { 
    // 将验证码加到id为captcha的元素里 
    captchaObj.appendTo("#popup-captcha-mobile"); 
    //拖动验证成功后两秒(可自行设置时间)自动发生跳转等行为 
    captchaObj.onSuccess(function() { 
        var validate = captchaObj.getValidate(); 
        $.ajax({ 
            url: "web/VerifyLoginServlet.php", // 进行二次验证 
            type: "post", 
            dataType: "json", 
            data: { 
                // 二次验证所需的三个值 
                type: "mobile", 
                username: $('#username3').val(), 
                password: $('#password3').val(), 
                geetest_challenge: validate.geetest_challenge, 
                geetest_validate: validate.geetest_validate, 
                geetest_seccode: validate.geetest_seccode 
            }, 
            success: function(data) { 
                if (data && (data.status === "success")) { 
                    $(document.body).html('<h1>登录成功</h1>'); 
                } else { 
                    $(document.body).html('<h1>登录失败</h1>'); 
                } 
            } 
        }); 
    }); 
 
}; 
$.ajax({ 
    // 获取id，challenge，success（是否启用failback） 
    url: "web/StartCaptchaServlet.php?type=mobile&t=" + (new Date()).getTime(), // 加随机数防止缓存 
    type: "get", 
    dataType: "json", 
    success: function(data) { 
        // 使用initGeetest接口 
        // 参数1：配置参数 
        // 参数2：回调，回调的第一个参数验证码对象，之后可以使用它做appendTo之类的事件 
        initGeetest({ 
            gt: data.gt, 
            challenge: data.challenge, 
            offline: !data.success // 表示用户后台检测极验服务器是否宕机，一般不需要关注 
        }, handlerPopupMobile); 
    } 
});