AJAX+PHP模态登录：验证成功后无法跳转问题排查

这问题我之前也碰到过，核心原因是：AJAX是异步请求，服务器返回的header("location: ...")不会触发浏览器的页面跳转——AJAX只会接收服务器输出的内容（包括跳转后的页面源码），然后把它插入到你的#ack元素里，这就是为啥成功时目标页面会显示在模态框内的原因。

咱们换个思路，让PHP返回一个成功标识，然后在前端用JS来执行跳转，具体改法如下：

1. 修正PHP验证代码 #

把原来的header跳转改成返回JSON格式的成功响应，同时我发现你原SQL里email='$email '多了个空格，这会导致邮箱正确也查不到数据，一起修正了：

<?php
// for testing purpose
require 'dbserver.inc.php';
$email = mysqli_real_escape_string($conn,$_POST['login_email']);
$password = mysqli_real_escape_string($conn,$_POST['login_pass']);
// 去掉email变量后面多余的空格
$sql = "SELECT count(*) from registergac1 WHERE (email='$email' AND password = '$password')";
$res = mysqli_query($conn,$sql);
$row = mysqli_fetch_array($res);

if($row[0] > 0) {
  // 返回JSON格式的成功信号和跳转地址
  echo json_encode(['status' => 'success', 'redirect_url' => 'register.php']);
} else {
  echo '<div class="alert alert-danger text-center" role="alert"> Enter correct email or password! </div>';
}
?>

2. 调整JavaScript代码 #

在AJAX回调里判断返回内容，如果是成功的JSON就执行页面跳转，同时优化表单提交的阻止逻辑：

// 提前阻止表单默认提交，避免重复绑定事件
$("#frmLogin").submit(function(e){
  e.preventDefault();
});

$('button#logBtn').click(function(){
  const emailVal = $("#email_login").val().trim();
  const passVal = $("#pass_login").val().trim();
  
  if(emailVal === "" || passVal === ""){
    $("div#ack").html("Please enter email and password");
    return;
  }

  $.post($("#frmLogin").attr("action"), $("#frmLogin :input").serializeArray(), function(data) {
    try {
      // 尝试解析JSON（成功时的返回内容）
      const response = JSON.parse(data);
      if(response.status === 'success'){
        // 执行页面跳转
        window.location.href = response.redirect_url;
      }
    } catch(err) {
      // 解析失败说明是错误提示，直接显示到页面
      $("div#ack").html(data);
    }
  });
});

额外说明 #

• 用JSON返回状态是比较规范的做法，前端能清晰区分成功/失败响应；
• 原代码里把submit事件绑定放在click里面，会导致每次点击都绑定一次事件，容易出问题，现在移到外面用e.preventDefault()更稳妥；
• 给输入值加trim()可以避免用户输入空格导致的无效验证。

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