jQuery AJAX: неожиданный конец ввода

Question

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

.js:

$("input[name=username]").keyup(function(event) { 
    processAJAXCheck(this,"username"); 
}); 

$("input[name=username]").change(function(event) { 
    processAJAXCheck(this,"username"); 
}); 

function processAJAXCheck(element, toCheck) { 
    contentOfInput = $(element).val(); 

    $.ajax({ 
     url: "ajax.php", 
     type: "POST", 
     data: {content: contentOfInput, toCheck: toCheck}, 
     success: afterAJAXResponse 
    }); 
} 

function afterAJAXResponse(data) { 
    result = $.parseJSON(data); 

    if(result['toCheck'] != undefined) { 
     inputSelector = 'input[name='+result['toCheck']+']'; 
     if(result['result'] == true) { 
      $(inputSelector).removeClass('invalid'); 
      $(inputSelector).addClass('valid'); 
      formValid = true; 
     } else { 
      $(inputSelector).removeClass('valid'); 
      $(inputSelector).addClass('invalid'); 
      formValid = false; 
     } 
    } 

    result = null; 
} 

PHP код:

if(isset($_POST['toCheck']) && isset($_POST['content']) 
    && $_POST['toCheck'] != "" && $_POST['content'] != "") 
{ 
    require_once 'classes/AAA.php'; 
    require_once 'classes/Database.php'; 
    require_once 'etc/settings.php'; 

    $db = new Database($GLOBALS['db_server'],$GLOBALS['db_name'],$GLOBALS['db_user'],$GLOBALS['db_pass']); 
    $aaa = new AAA($db); 

    switch($_POST['toCheck']) 
    { 
     case 'email': 
      $output['result'] = $aaa->isUsableEmail($_POST['content']); 
      $output['toCheck'] = 'email'; 
      break; 
     case 'username': 
      $output['result'] = $aaa->isUsableUsername($_POST['content']); 
      $output['toCheck'] = 'username'; 
      break; 
     default: 
      $output['result'] = 'error'; 
      break; 
    } 

    echo json_encode($output); 
} 

Странным является то, что все работает без проблем при нажатии на любую клавишу символа. Но когда я нажимаю «Tab», чтобы переключиться на другой вход (который использует ту же самую функцию, но не возвращает ошибку - и когда я нажимаю Tab там!) Я получаю следующее сообщение об ошибке:

Uncaught SyntaxError: Unexpected end of input b.extend.parseJSON 
jquery-1.9.1.min.js:3 afterAJAXResponse 
registration.php?school_id=1&department_id=1:189 b.Callbacks.c 
jquery-1.9.1.min.js:3 b.Callbacks.p.fireWith jquery-1.9.1.min.js:3 k 
jquery-1.9.1.min.js:5 b.ajaxTransport.send.r 

Спасибо за ваш ответы заранее.

Answer 1

Спасибо всем за ваши советы!

И, наконец, добавление dataType в $ .AJAX() помогло! Я добавил dataType: «json» в вызов AJAX и удалил .parseJSON() из обратного вызова, и я больше не испытываю никаких ошибок.

Опять же, спасибо большое @ADASein

Answer 2

Я предполагаю, что вы не хотите называть свою функцию ajax при нажатии клавиши табуляции. Тем не менее, вы не проверяете это, и keyup захватывает ваше событие щелчка на вкладке.

Вы должны изменить:

$("input[name=username]").keyup(function(event) { 
    processAJAXCheck(this,"username"); 
}); 

к чему-то вроде:

$("input[name=username]").keyup(function(event) { 
    if (event.keyCode !== 9) { // I think it's 9... 
    processAJAXCheck(this,"username"); 
    } 
}); 

Вы также можете добавить ввести - 13 - например.

Answer 3

Вы можете либо проверить код ключа, как описано Jeroen (который спасет вас от звонка на сервер), либо вернуть пустой скрипт (json encoded) из вашего php-скрипта, когда post проверяет значение false.