带有jQuery的CodeIgniter JSON AJAX响应

在注册表单中键入用户名时，我尝试检查用户名，并创建了以下函数：

function validateSignupEmail(input){
    if (input == ""){
        return "Please enter your usernane.";
    }else if (input.length > 20){
        return "Your username cant exceed 20 characters.";
    }else{
        var type = "username_check";
        $.ajax({
            type: "POST",
            url: www+"signup/validate",
            dataType: 'json',
            data: {
                type : type,
                input : input
            },
            success: function(data) {
                return data.response;
            }
        });
    }
}

在注册控制器中，我有一个名为validate的函数

我还有以下代码，显示了div中用户名的状态：

问题是我不能在success:function{}中返回AJAX响应

---

谢谢。

欢迎来到奇妙的异步世界，在这里，您必须等待AJAX调用完成，然后才能处理响应

以下是如何处理回调中的响应：

$("#signup_page form input[type='text']#username").keyup(function(){
    validateSignupEmail($(this).val());
});

function validateSignupEmail(input){
    if (input == ""){
        return "Please enter your usernane.";
    }else if (input.length > 20){
        return "Your username cant exceed 20 characters.";
    }else{
        var type = "username_check";
        $.ajax({
            type: "POST",
            url: www+"signup/validate",
            dataType: 'json',
            data: {
                type : type,
                input : input
            },
            success: function(data) {
                $(".signup_ajax_live_messages").find(".username_check").text(data.response);
            }
        });
    }
}

另一方面：您确定要在每次击键时发出新的AJAX请求吗

如果只想在用户暂停键入后进行检查，请使用setTimeout：

---

下面是一个示例：

您不能从回调函数返回变量

发送AJAX请求时，即使请求尚未完成，应用程序流也会立即返回。一段时间后，请求完成，并执行成功回调

您应该修改validateSignupEmail消息以接受回调

function validateSignupEmail(input, callback){
    if (input == ""){
        return "Please enter your usernane.";
    }else if (input.length > 20){
        return "Your username cant exceed 20 characters.";
    }else{
        var type = "username_check";
        $.ajax({
            type: "POST",
            url: www+"signup/validate",
            dataType: 'json',
            data: {
                type : type,
                input : input
            },
            success: function(data) {
                callback(data.response);
            }
        });

        return "pending"; // let us know the AJAX request is in progress
    }
}

然后你会像这样使用它

$("#signup_page form input[type='text']#username").keyup(function(){
    var text = validateSignupEmail($(this).val(), function (text) {
        console.log('text => '+text);
        $(".signup_ajax_live_messages").find(".username_check").text(text);
    });

    if (text !== "pending") {
        // text contains the error :(.
    }
})

---

谢谢，什么是最好的方法来代替每次击键时ajax请求？谢谢，当我一直按下键盘上的一个按钮，然后释放它时，这似乎是有效的。。。当我继续快速输入我的名字时，它似乎不起作用，例如…@fxuser-看看我刚才添加的小提琴。

var timer;
$("#signup_page form input[type='text']#username").keyup(function(){
    var text = $(this).text();
    timer && clearTimeout(timer);
    timer = setTimeout(function(){
        validateSignupEmail(text);
    }, 400); // <-- this is the amount of milliseconds for the user to pause before making the AJAX call
});

function validateSignupEmail(input, callback){
    if (input == ""){
        return "Please enter your usernane.";
    }else if (input.length > 20){
        return "Your username cant exceed 20 characters.";
    }else{
        var type = "username_check";
        $.ajax({
            type: "POST",
            url: www+"signup/validate",
            dataType: 'json',
            data: {
                type : type,
                input : input
            },
            success: function(data) {
                callback(data.response);
            }
        });

        return "pending"; // let us know the AJAX request is in progress
    }
}

$("#signup_page form input[type='text']#username").keyup(function(){
    var text = validateSignupEmail($(this).val(), function (text) {
        console.log('text => '+text);
        $(".signup_ajax_live_messages").find(".username_check").text(text);
    });

    if (text !== "pending") {
        // text contains the error :(.
    }
})