javascript - 如何在 ajax 页面中为计时器编写代码，以便计时器在页面重新加载时不会更改

Question

我正在使用 PHP 和 AJAX 创建登录页面。我希望用户仅尝试登录 3 次，然后如果用户未输入正确的详细信息，则应启动计时器。应该启动定时器，这样即使用户刷新页面它也不会改变。我正在从 AJAX 页面发送数据并将其验证到 PHP 页面中。我的所有计时器代码都从if (res.error == 'not_found')语句开始。这是我的代码：

AJAX 代码：

var validateCounter = 0;
var counter = 60;

//login form code

$('#loginForm').submit(function(e) {
    e.preventDefault();
    var username = $('#loginEmail').val();
    var password = $('#loginPassword').val();
    var form1 = document.getElementById('loginForm');
    var len = form1.length;

    $.ajax({
        method: "post",
        url: "loginserver.php",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function(response) {
            var res = JSON.parse(response);
            if (username == '' || password == '') {
                for (i = 0; i < (len - 1); i++) {
                    form1.elements[i].style.border = "1px solid red";
                    form1.elements[i].style.textShadow = "1px 1px 2px #000";
                }
            } else {
                if (res.error == 'not_found') {
                    for (i = 0; i < (len - 1); i++) {
                        form1.elements[i].style.border = "1px solid red";
                        form1.elements[i].value = null;
                    }
                    validateCounter += 1;
                    console.log(validateCounter);
                    if (validateCounter > 2) {
                        var interval = setInterval(function() {
                            counter--;
                            if (counter <= 0) {
                                clearInterval(interval);
                                $('#timer').fadeOut();
                                $('#loginEmail').attr('disabled', false);
                                $('#loginPassword').attr('disabled', false);
                                $('#loginSubmit').attr('disabled', false);
                                validateCounter = 0;

                            } else {
                                $('#timer').show();
                                $('#timer span').text(counter + " s");
                                $('#loginEmail').css('border', 'none');
                                $('#loginEmail').attr('disabled', true);
                                $('#loginPassword').css('border', 'none');
                                $('#loginPassword').attr('disabled', true);
                                $('#loginSubmit').attr('disabled', true);
                            }
                        }, 1000);
                    }
                } else if (res.success == 'authorized') {
                    location.href = "index.php";
                }
            }
        }
    });

});

PHP代码：

<?php
session_start();
include('../dbconnection.php');

function validate($data){
    return htmlspecialchars($data);
}
$adminName = validate($_POST['loginEmail']);
$adminPass = validate($_POST['loginPassword']);

//validating admin
$select_stmt = $connection -> prepare("SELECT * FROM `admin`
                                WHERE `admin_username`=? AND `admin_password`=?");
$select_stmt -> bind_param('ss',$adminName, $adminPass);

$select_stmt -> execute();
// get result into a variable
$result = $select_stmt -> get_result();

//store result using fetch_array
$data = $result -> fetch_assoc();

//get rows from result
$num_rows = $result -> num_rows;

if( $num_rows > 0){
    echo json_encode(array('success' => 'authorized'));
    $_SESSION['adminId'] = $data['admin_id'];
}else{
    echo  json_encode(array('error'=>'not_found')); 
}

?>

实际上，此登录页面仅供网站管理员使用，其他人无法从此处登录。由于我知道用户名和密码，我会成功登录，但如果其他人想登录，那么他应该在尝试 3 次后完全锁定。计时器应在 3 次尝试后启动，以便在以下情况下不会更改 - 1：刷新页面 2：启动隐身模式 3：关闭并重新打开浏览器 所有 3 个条件都应在尝试登录的人的设备中。我应该仍然可以从我的设备登录。

标签： javascriptphpajax