$ .ajax ошибка получения данных из php-файла

Question

Я занимаюсь разработкой веб-сайта, и прямо сейчас его регистрационная форма! Но у меня есть что-то вроде проблемы! Я хочу создать поле ввода пользователя, и когда пользователь печатает, проверьте, существует ли имя пользователя в базе данных и дает какой-то результат.

Ошибка в этом: предположим, что в базе данных есть только имя пользователя «Manuel». Если я набираю «Мануэль» в поле ввода, сообщение не отображается. Теперь, если я набираю какой-либо другой символ, он дает мне сообщение «Пользователь уже существует». Если я удалю последний напечатанный символ, сообщение исчезнет. Если я снова наберу и что-то вроде «Мануэла», появится сообщение, если я снова наберу и у вас «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 означает Asynchronous 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 
       } 
      } 
     }); 
    } 
} 

Answer 2

Я думаю, вы на правильном пути, но я не думаю, что ваша реализация является правильным.

Примечание: Я не герой Javascript

$("#filter").keyup(function(e) { 

var filter = $("#filter").val(), 
    timer = $('#filter').data('timeout'), 

if(timer) { 
    clearTimeout(timer); 
    $('#username').removeData('timeout'); 
} 

$('#username').data('timeout', setTimeout(function() { 
    var url = 'processregistration.inc.php'; 

    $.POST(url, {username: $('#username').val()}, function(data) { 
     // you get the picture ;) 
     updateComponentThatShowsIfUserNameIsTakenFunction(data.CHECK); 
    }); 
}, 100)); 

function updateComponentThatShowsIfUserNameIsTakenFunction(taken) { 
    $('#username').addClass('input_error'); 
} 

Что я сделал: Удалены глобальные переменные, они раздражают и ошибок. Вместо этого я использую обратный вызов с именем updateComponentThatShowsIfUserNameIsTakenFunction. Вы также можете изменить его, чтобы напрямую вызвать эту функцию с «данными», конечно. Я также добавил тайм-аут для вас, так что вы не будете называть сервер КАЖДОЙ клавиатурой. Каждый тайм-аут отменяет предыдущий тайм-аут, заставляя проверку запускать только 100 мс после того, как пользователь набрал текст (вы не хотите спамить свой сервер).

Надеюсь, это сработает и поможет вам!