Question

我有一个非常简单的登录表单，我想在提交表单之前检查凭据是否正确（因此，如果凭据错误，我不必重新加载页面）。
/> 我遇到的问题是来自AJAX调用的响应。当程序确定用户提供了正确的凭据时，此代码就像魅力一样。此外，当执行两次检查之前到AJAX调用时（无论用户是否填写了密码输入字段或用户名是否有效），代码都能正常工作。它返回一条错误消息并返回false布尔值，阻止表单提交。但是，当服务器的响应返回并且发现凭据不正确时，将显示错误消息，但页面也会重新加载（其中显示另外一个错误信息）。为什么表单仍在提交，即使我还没有回复？我检查了JavaScript控制台，没有错误。我也尝试将if语句反转，检查是否ajax.responseText === "true"，得到相同的结果。我尝试在ajax.onreadystatechange调用下添加一个返回false，但这只是阻止表单提交（无论服务器的响应如何）。

这是表格代码：

<form method="POST" action="/afton/" onsubmit="return checkForm()">
    <label for="username">Username:</label>
    <input type='text' id='username' name='username' placeholder='Enter username...' required>
    <label for="password">Password:</label>
    <input type='password' id='password' name='password' placeholder='Enter password...' required>
    <div class="form-buttons">
        <button type='submit' name='action' id="loginButton" value='login'>Login</button>
        <button type='button' id='register'>Register</button>
    </div>
</form>

这是js功能：

// Function that checks whether the user supplied correct credentials
function checkForm() {

// Get the password provided and the server message div on the page
    const messageBox = document.getElementById("server-message");
    const password = document.getElementById("password").value;

// If password is blank, return error message and return false
    if (password === "") {
        messageBox.innerHTML = "<p class='badMessage'>Please fill in the password!</p>"
        return false;
    }

// If the username input tag doesn't contain the 'goodBorder' class received upon validation of username, return error and false
    if (!usernameInput.classList.contains("goodBorder")) {
        messageBox.innerHTML = "<p class='badMessage'>Please provide a valid username!</p>"
        return false;
    }

// AJAX call that posts the info via JSON to check
    const ajax = new XMLHttpRequest();
    ajax.open("POST", "index.php?action=ajaxLogCheck", true);
    ajax.setRequestHeader("Content-type", "application/json");
    ajax.send(JSON.stringify({"username":usernameInput.value, "password":password}));

// Handles the AJAX response
    ajax.onreadystatechange = function () {
        if (ajax.readyState === 4 && ajax.status === 200) {
            if (ajax.responseText !== "true") {
                messageBox.innerHTML = ajax.responseText;
                return false;
            }
            return true
        }
    }
}

以下是处理PHP：

的AJAX代码

// Get posted JSON encoded data
    $data = json_decode(trim(file_get_contents("php://input")), true);

// Filter and sanitize the supplied username and password
    $username = filter_var($data['username'], FILTER_SANITIZE_STRING);
    $password = filter_var($data['password'], FILTER_SANITIZE_STRING);

// Get user data by the username and check the username against the password
    $userData = getClient($username);
    $hashCheck = password_verify($password, $userData['password']);

// Check response from the hashCheck and return the result
    if ($hashCheck) {
        echo "true";
        exit;
    }
    logAtt($username, $_SERVER['REMOTE_ADDR'], false, getBrowser($_SERVER['HTTP_USER_AGENT']));
    sleep(0.5);
    $rands = array("Sorry, the username and/or password doesn't match our database. Please try again.", "Sorry, we don't recognize those login credentials. Please try again.", "Sorry, that login was incorrect. Please try again.", "Incorrect, please try again");
    $randResult = array_rand(array_flip($rands));
    echo "<p class='badMessage'>$randResult</p>";

Answer 1

        // Just the point in AJAX function where you were returning True or
        // False...Just Assign RESULT = 0 for False and 
        // RESULT = 1 for True
        // .....SUppose You password matches so you were returning True..
        // Dont do that...Instead Just Assign RESULT = 0 in that place and 
        // and out of the ajax Block paste this 'return Boolean(RESULT)'
        // if RESULT = 0 then it will return False else it will return True
// Function that checks whether the user supplied correct credentials
function checkForm()
    {
        // Initialize a Variable Here Say RESULT
        var RESULT = 0;
        if (password === "") 
            {
                 RESULT = 0;
            }
        else if (!usernameInput.classList.contains("goodBorder")) 
            {
                messageBox.innerHTML = "<p class='badMessage'>Please provide a valid username!</p>"
                RESULT = 0;
            }
        // After this Put the ajax function and if you want to return False
        // then simply assign RESULT = 0 instead of 'return false' else assign
        // RESULT = 1 instead of 'return true'

        return Booelan(RESULT); 
        // THis line is main Part this is returned by checkForm() function
    }

// If I am still not clear, then I'll be happy to explain it on Google Meet.! :)

表单提交，即使AJAX表单检查返回false

1 个答案: