如何使用AJAX检查数据库中是否已经存在电子邮件并显示错误消息

Question

所以，我想做的是当用户登录时，我想检查数据库，看看他们使用的电子邮件是否已经在数据库上注册了，如果是注册的，我想显示错误消息"电子邮件地址已经被占用了。"，这显然只能使用AJAX来完成。基本上，这个过程涉及到三个文件:login.php文件"这是HTML代码的span标签所在，这是我想要返回错误信息的地方;login.php文件包含注册表单，这是我想要在用户输入电子邮件输入字段时检查电子邮件是否存在的地方。第二个文件是script.js，其中包含AJAX代码，该代码仅包含在login.php文件中。最后是connection.php文件，这里是我的数据库连接，检查邮件是否存在于数据库的php代码是。

下面是代码，以获得更好的外观:

PHP (connection.php):

$sql = "SELECT * FROM users WHERE email='$email'";
$result = mysqli_query($connection, $sql);
if(mysqli_num_rows($result) > 0){
echo "Email address already taken.";
} else {
$sql = "INSERT INTO users (firstname, lastname, email, password) VALUES ('$fname', '$lname', '$email', '$hashed_password')";
}

HTML(下):

<span style="margin-top:56px; position: fixed; margin-left: -498px; font-size: 14px; color: red; visibility: hidden" id="emailExists" name="emailExists" class="emailExists">Email address already taken.</span>

AJAX (script.js):

function checkEmail() {
jQuery.ajax({
url: "connection.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#emailExists").html(data);
},
error:function (){}
});
}

然而，这不起作用。我该怎么办?现在，php代码可以肯定地工作了。我也对它进行了测试，在connection.php文件中，它实际上回显出"电子邮件地址已经存在。"，如果它存在于数据库中。但我想让它在登录页面，在span标签中，在用户输入自己的时候回显，所以我猜这是AJAX的问题，我不确定。

请帮帮我。非常感谢。

我还在login.php文件中包含了jQuery库。

Answer 1

您的#emailExistsspan是隐藏的，所以成功结果不显示。在ajax成功事件中首先你必须显示#emailExistsspan:

$("#emailExists").attr.('visibility', 'visible');

所以你最终的ajax将是:

function checkEmail() {
jQuery.ajax({
url: "connection.php",
data:'email='+$("#email").val(),
type: "POST",
success:function(data){
$("#emailExists").attr.('visibility', 'visible');
$("emailExists").html(data);
},
error:function (){}
});
}

Answer 2

状态检查

1. 检查你的jQuery是否初始化
2. checkemail()初始化点击事件。
3. 检查控制台日志，看看你在那里发现了什么样的错误。

如果一切正常，然后在connection.php中以JSON格式发送到您的代码像

$data = array("message"=>"Email address already taken.");
echo Json_encode($data);

，在你的js代码中，在成功响应

之后添加这个

$("#emailExists").html(data.message);