Three effects of PC mobile terminal and embedded sliding puzzle verification code

Recently, the boss of the company asked to make a sliding puzzle effect, and it took a long time to get it done; I will share it today, please don't spray! ! !
Demonstration effect reference: http://www.erdangjiade.com/js/1141.html
The specific steps are as follows:
First, confirm the front-end use page, such as the landing page

<script src="http://code.jquery.com/jquery- 1.12.3.min.js"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
1. Visit the imported class library on the login page : If your website uses https, you only need to change the place where the test library is introduced to the https protocol, and you don't need to change other places. For example, replace it with the following code: The
complete code is as follows:

<script src="https://code.jquery.com/jquery-1.12.3.min.js"></script>
<script src="https://static.geetest.com/static/tools/gt .js"></script>
2. The code below to initialize the front end needs to be executed after the page is loaded. If you use jQuery, you can write it in $(function(){});

$.ajax({
    // Get id, challenge, success (whether failback is enabled)
    url: "../web/StartCaptchaServlet.php?t=" + (new Date()).getTime(), // Add random numbers to prevent caching
    type: "get",
    dataType: "json",
    success: function (data) {
        // use the initGeetest interface
        // Parameter 1: Configuration parameters
        // Parameter 2: callback, the first parameter of the callback verification code object, which can then be used for events such as appendTo
        initGeetest({
            gt: data.gt,
            challenge: data.challenge,
            product: "popup", // Product form, including: float, embed, popup. Note that it is only valid for the PC version of the verification code
            offline: !data.success // Indicates whether the user's background check server is down. In cooperation with the SDK, users generally do not need to pay attention
        }, handlerPopup);
    }
});
The above code means that after the page is loaded, you need to get the verification code information from the URL address you specify. As for what is written in the above URL address "../web/StartCaptchaServlet.PHP", we are on the server side. Code deployment will be explained in detail. But it should be noted that there is a callback function called "handlerPopup" in the above code, this function is the real initialization code you need to verify the code: as follows:

// code details
var handlerPopup = function (captchaObj) {
    // Register for submit button events, such as the login button on the login page
    $("#popup-submit").click(function () {
        // Some steps to obtain login data in the login interface are omitted here
         
        // Check whether the verification code is clicked first
        var validate = captchaObj.getValidate();
        if (!validate) {
            alert('Please complete the verification first!');
            return;
        }
        // Submit verification code information, such as login page, you need to submit login information, user name and password and other login data
        $.ajax({
            url: "../web/VerifyLoginServlet.php",
            type: "post",
            // dataType: "json",
            data: {
                // Other data such as username and password, obtained by yourself, no demonstration
                username:username,
                password:password,
                // Verification code data, these data do not need to be obtained by yourself
                // these are the three values ​​needed for the second validation
                // Of course, you can also directly set the verification code to check separately, omitting other information
                geetest_challenge: validate.geetest_challenge,
                geetest_validate: validate.geetest_validate,
                geetest_seccode: validate.geetest_seccode
            },
            // here is the handler function that returns the processing result correctly
            // Suppose you return 1, 2, 3
            // Of course, the normal case is to return JSON data
            success: function (result) {
                // 1 means verification code verification failed
                if (result == "1") {
                    alert("Captcha verification failed!");
                }else if (result == "2") {
                    alert("Incorrect username or password!");
                }else if (result == "3") {
                    alert("Login successful!");
                    // The login is successful, you can do other processing here
                }else{
                    alert("Login error!");
                }
            }
        });
    });
    // The popup needs to be bound to trigger the verification code popup button
    // For example, on the login page, this trigger button is the login button
    captchaObj.bindOn("#popup-submit");
      
    // Add the verification code to the element with id captcha
    // The verification code will be displayed in the element specified below
    captchaObj.appendTo("#popup-captcha");
      
    // More interface reference: http://www.erdangjiade.com/
};