CodeIgniter JSON AJAX ответ с помощью jQuery

Question

Я пытаюсь проверить имя пользователя при вводе его в форму регистрации, и я создал следующую функцию:

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()

function validate(){
    $type = isset($_POST["type"]) ? $_POST["type"] : "";
    $input = isset($_POST["input"]) ? $_POST["input"] : "";

    if ($type == "username_check"){
        echo json_encode(array('response' => 'username available'));
    }else{
        return false;
    }
}

Также у меня есть следующий код, который показывает статус пользователя в div:

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

Дело в том, что я не могу вернуть ответ AJAX при успехе: function(){}

Спасибо.

Answer 1

Вы не можете вернуть переменную из функции обратного вызова.

Когда отправляется запрос AJAX, поток приложения сразу же возвращается, даже если запрос еще не завершен. Через некоторое время запрос завершается и выполняется обратный вызов success.

Вы должны изменить ваше сообщение 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 :(.
    }
})

Answer 2

Добро пожаловать в удивительный мир асинхронности, где вам нужно дождаться завершения вызова 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:

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
});

Вот пример: http://jsfiddle.net/dMhdD/