javascript - $.ajax 从 php 文件取回数据时出错

Question

我正在开发一个网站，现在是它的注册表单!但我有一个类似的问题!我想创建一个用户名输入字段，当用户输入时，检查用户名是否已存在于数据库中并给出一些输出。

错误是这样的:假设数据库中只有用户名“Manuel”。如果我在输入字段中键入“Manuel”，则不会显示任何消息。现在，如果我输入任何其他字符，它会给我消息“用户已存在”。如果我删除最后输入的字符，该消息就会消失。如果我再次输入并输入“Manuela”之类的内容，则会显示该消息，如果我再次输入并输入“Manuelae”，该消息就会消失

感谢您的帮助!!

这里是代码

这里是输入字段:(register.php)

<input type="text" id="username" name="username" maxlength="40" required="required">
<span id="username-info">What's your username?</span>

这里是 javascript 和 jquery 代码 (registration.js)

$(document).ready(function () {

    var userExists = new Boolean();

    var username = $("#username");
    var usernameInfo = $("#username-info");

    username.keyup(validateUsername);

}

这里是函数 validateUsername():

function validateUsername(){
    checkUsername();
    var minlenght = 5;
    var usernameVal = username.val();
    if(usernameVal.length < 1){
        usernameInfo.addClass("input-error");
        usernameInfo.text(messages.FIELD_REQUIRED);
    }  else if(usernameVal.length < minlenght){
        usernameInfo.addClass("input-error");
        usernameInfo.text(messages.USERNAME_MIN_WORDS+minlenght+' '+messages.USERNAME_CHARACTERS);
    } else if(userExists){

        //here i tell the user that the user already exists
        usernameInfo.addClass("input-error");
        usernameInfo.text('The user already exists');

    } else {
        usernameInfo.removeClass("input-error");
        usernameInfo.text("");  
    }

}

这里是函数 checkUsername():

function checkUsername() {
        var url = 'processregistration.inc.php'; 

        $.ajax({
            type: "POST",
            dataType:"json",
            url: url,
            data: {username: username.val()},
            success: function(data){

                userExists = data.CHECK; //true if the user exists, false if not

            }
        });
    }

Answer 1

Ajax 意味着异步 JavaScript 和 XML。

您正在检查实际上未收到的值。

你应该这样做:

function validateUsername() {
    // remove input-error, text

    if (...localcheck...) {
        // add input-error, text
    }
    else if (...otherlocalcheck...) {
        // add input-error, text
    }
    else {
        $.ajax({
            ...
            success : function(data) {
                if (data.CHECK) {
                    // add input-error, text
                }
            }
        });
    }
}