jQuery的：keyup事件 - 阿贾克斯回归验证 [英] jQuery: keyup event - ajax return validation

问题描述

我将开始与我想要做的。

I'll start with what I'm trying to do.

我已经创建了用户在其中输入他们的电子邮件地址和（如果正确的话），一个忘记密码系统，他们将发送一封电子邮件，其中重置链接。

I've created a "Forgotten Password" system where the user enters their email address and (if correct) they will be sent an email with a reset link.

有阿贾克斯的形式网页，其中检测，如果输入的电子邮件是在数据库中的一小部分。如果电子邮件的确实的存在于数据库中的形式改变颜色为绿色，并且启用提交按钮。如果没有检测到电子邮件的形式一直显示为红色，并提交按钮被禁用。

There is a small section of ajax in the form page which detects if the email entered is in the database. If the email does exist in the database the form changes color to green and the submit button is enabled. If the email is not detected the form stays red and the submit button is disabled.

问题是，键入电子邮件地址时，KeyUp事件似乎发生当用户进入一个或多个字符不是正确的电子邮件（基本上如果的 [e-mail] 的是在我的数据库，他们将要进入​​的 [e-mail]1 的用于提交启用）

The issue is that when typing the email address, the keyup event seems to happen when the user has entered one more character than the correct email (basically if [e-mail] was in my database, they would have to enter [e-mail]1 for submit to be enabled)

这是我的jsfiddle 的一切除了阿贾克斯工作。

Here is my JSFiddle with everything apart from the ajax working.

下面是AJAX文件本身的一个例子：

Here is an example of the ajax file itself:

<?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]);

?>

如果有任何其他的信息，我可以给，这将有助于请让我知道。谢谢你。

If there is any other information i can give that will help please let me know. Thanks.

由于有似乎仍然没有速战速决/答案，我做了一个简短的视频显示究竟会发生什么。你可以在这里看到： https://www.youtube.com/watch?v=P -2Gz5b4ek8 的

推荐答案

Ajax请求是异步的！你的情况，当你检查如果（databaseCheck！= 1） databaseCheck 的值是previous阿贾克斯的回应。这就是为什么你必须输入1多余的字符得到最后的结果。

Ajax requests are asynchronous! In your case when you check if(databaseCheck != 1) the value of databaseCheck is previous ajax's response. Thats why you have to type 1 extra character to get last result.

$('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 {
        ....
    }
}

这是成功的一部分，称这样的功能，这将确保这些codeS将阿贾克斯成功后运行。 这将解决您的本期但你必须prevent同时Ajax调用。我们不知道它要求先返回，如果第一个请求响应最后JS将设置通知与响应。所以，你必须处理标志添加到prevent吧。

on success part call a function like this, it will ensure that these codes will run after ajax success. It will solve your current issue but you have to prevent simultaneous ajax calls. We have no idea which request return first, if first request response last js will set notification with that response. So you have to add a processing flag to prevent it.

这篇关于jQuery的：keyup事件 - 阿贾克斯回归验证的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！