jQuery: событие keyup – подтверждение возврата ajax

Я начну с того, что я пытаюсь сделать.

Я создал систему «Забытый пароль», в которой пользователь вводит свой адрес электронной почты, и (если это правильно) им будет отправлено электронное письмо со ссылкой для сброса.

На странице формы есть небольшой раздел ajax, который определяет, находится ли введенное письмо в базе данных. Если письмо существует в базе данных, форма меняет цвет на зеленый, и кнопка отправки включена. Если сообщение не обнаружено, форма остается красной, и кнопка отправки отключена.

введите описание изображения здесь

Проблема в том, что при вводе адреса электронной почты событие keyup, похоже, происходит, когда пользователь ввел еще один символ, чем правильный адрес электронной почты (в основном, если hello@123.com был в моей базе данных, они должны были бы ввести hello @ 123. com1 для отправки для включения)

Вот мой JSFiddle со всем, кроме работы ajax.

Вот пример самого файла ajax:

<?php session_start(); $Email = $_POST['email']; //Parse ini file containing database information $databaseInfo = parse_ini_file("optiMizeWebReport.ini", true); global $con; //Connect to database $con = @mysqli_connect($databaseInfo['optiMizeDatabaseConnection'] ['WebServer'],$databaseInfo['optiMizeDatabaseConnection']['Username'], $databaseInfo['optiMizeDatabaseConnection']['Password'], $databaseInfo['optiMizeDatabaseConnection']['DBName']); //Check connection and output error if invalid if(!$con) { die('Connect Error ('. mysqli_connect_errno() .') '.mysqli_connect_error()); } //Execute query $result = mysqli_query($con, "SELECT COUNT(*) FROM login WHERE Email='$Email'") or die("Error: ".mysqli_error($con)); //Initialize $emailMatch = array(); //Extract while($emailMatch[] = mysqli_fetch_array($result)) print_r($emailMatch[0][0]); ?> 

Если есть какая-либо другая информация, которую я могу дать, это поможет, пожалуйста, дайте мне знать. Благодарю.

РЕДАКТИРОВАТЬ:

Поскольку, похоже, нет быстрого исправления / ответа, я сделал короткое видео, показывающее, что именно происходит. Вы можете увидеть его здесь: https://www.youtube.com/watch?v=P-2Gz5b4ek8

Запросы Ajax являются асинхронными! В вашем случае, когда вы проверяете, является if(databaseCheck != 1) значение databaseCheck это предыдущий ответ ajax. Вот почему вам нужно набрать 1 дополнительный символ, чтобы получить последний результат.

 $('input').bind("keyup", function() { $.ajax({ type: "POST", url: "ForgotPasswordAjax.php", data: {email: $('#email').val()}, success: function(output){ console.log(output); notification(output); } }); }); function notification(databaseCheck) { if (databaseCheck != 1) { .... } else { .... } } 

на этапе успеха вызовите функцию, подобную этой, она обеспечит выполнение этих кодов после успеха ajax. Он решит вашу текущую проблему, но вы должны предотвратить одновременные вызовы ajax. Мы не знаем, какой запрос возвращать первым, если первый запрос ответа последний js будет устанавливать уведомление с этим ответом. Поэтому вам нужно добавить флаг обработки, чтобы предотвратить его.

Я обновил JsFiddle .

Здесь я включил keydown и сосредоточился на

 $('#email').bind("keyup keydown change focus blur", function() { 

и изменить ниже строки

  $('input').bind("keydown", function() { 

В jQuery есть другое событие с именем input .

 $('#email').bind("input", function() { 

обновленный jsFiddle