如何使用AJAX检测邮箱是否已存在于数据库并显示对应错误提示

1. 修正connection.php逻辑 #

你当前的connection.php没有接收AJAX通过POST传递的email参数，且校验接口不应包含用户插入逻辑（否则校验过程中会直接把未完成注册流程的用户写入数据库），修正后代码如下：

// 新增：接收AJAX传递的邮箱参数
$email = $_POST['email'] ?? '';
// 这里保留你原有数据库连接代码
// 推荐使用预处理语句避免SQL注入，替代原有字符串拼接SQL写法
$stmt = mysqli_prepare($connection, "SELECT * FROM users WHERE email = ?");
mysqli_stmt_bind_param($stmt, "s", $email);
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);

if(mysqli_num_rows($result) > 0){
  echo "Email address already taken.";
} else {
  // 校验阶段不要执行INSERT逻辑，插入操作放到正式注册提交的接口中
  echo "";
}
// 终止后续不必要的内容输出
exit;

2. 给login.php的邮箱输入框绑定触发事件 #

你只定义了checkEmail函数，但没有给邮箱输入框绑定触发事件，用户输入时不会自动执行校验逻辑，给id为email的输入框新增oninput属性即可：

<!-- 你的邮箱输入框，新增事件绑定 -->
<input type="email" id="email" name="email" oninput="checkEmail()">

<!-- 原有提示span无需修改 -->
<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>

3. 修正script.js的AJAX逻辑 #

原有代码只更新了span的内容，但没有修改span的visibility属性，所以就算返回了错误提示也是隐藏状态，修正后代码如下：

function checkEmail() {
  jQuery.ajax({
    url: "connection.php",
    // 用对象格式传参，避免邮箱含特殊字符时的转义问题
    data: {email: $("#email").val()},
    type: "POST",
    success:function(data){
      const tipEl = $("#emailExists");
      tipEl.html(data);
      // 返回内容非空则显示提示，否则隐藏
      if(data.trim()) {
        tipEl.css("visibility", "visible");
      } else {
        tipEl.css("visibility", "hidden");
      }
    },
    error:function (){
      console.log("邮箱校验请求异常");
    }
  });
}

如果修复后还有问题，可以打开浏览器F12控制台，查看「网络」标签下的connection.php请求是否正常发送、返回内容是否符合预期，同时查看控制台是否有JS报错，可以快速定位剩余问题。

内容的提问来源于stack exchange，提问作者user17131771