使用e.preventDefault()时如何实现登录成功跳转与表单错误提示？

核心问题分析 #

• 后端PHP在登录成功时同时输出了<script>跳转代码和JSON数据，导致AJAX接收到的响应不是有效JSON，前端JS的success回调无法正确执行。
• e.preventDefault()是必须的，它阻止了表单默认提交行为，才能在验证失败时停留在当前页面显示错误提示，但之前因为响应格式错误，导致成功时的跳转逻辑失效。

修复步骤 #

1. 修正后端PHP代码

移除登录成功时的<script>跳转输出，确保只返回合法的JSON数据：

$username = mysqli_real_escape_string($connection, $_POST['username']);
$password = mysqli_real_escape_string($connection, $_POST['password']);

$username_error = '';
$password_error ='';
$success = '';


try{
    if(strlen($username) < 5 || strlen($username) > 255){
        $username_error = "This field require with 5 minimum character not greater than 255";
    }
    if(strlen($password) < 5 || strlen($password) > 255){
        $password_error = "This field require with 5 minimum character not greater than 255";
    }
    if($username_error === '' && $password_error === ''){
        $queryvalidate = "SELECT * FROM tbl_userinfo WHERE username = ?";
        $stmt = mysqli_prepare($connection, $queryvalidate);
        mysqli_stmt_bind_param($stmt, "s", $username);
        mysqli_stmt_execute($stmt);
        $result = mysqli_stmt_get_result($stmt);
        if($result && mysqli_num_rows($result) === 1){
            $user_data = mysqli_fetch_assoc($result);
            $stored_password_hash = $user_data['password'];
            if(password_verify($password, $stored_password_hash)){
                $success = "login";
                $_SESSION['status'] = 'valid';
                // 移除跳转脚本，交给前端处理跳转
                // echo "<script>window.location.href ='../admin/homeadmin.php'</script>";
            }
            else{
                $password_error = "The password is not match with useranme";
                $_SESSION['status'] = 'invalid';
            }
        }
        else{
            $username_error = "Username does not exist";
            $_SESSION['status'] = 'invalid';
        }
        mysqli_stmt_close($stmt);
        mysqli_close($connection);
    }
    $output = array(
        'username_error' => $username_error,
        'password_error' => $password_error,
        'success' => $success
    );
    // 设置响应头为JSON格式，确保前端正确解析
    header('Content-Type: application/json');
    echo json_encode($output);   

}catch(Exception $e){
    // 异常时也返回JSON格式错误
    header('Content-Type: application/json');
    echo json_encode(['error' => 'error page']);
}

2. 前端JS代码保持现有逻辑

当前JS逻辑已满足需求，无需修改：

$(document).ready(function(){
    $('#loginformid').on('submit',function(e){
        e.preventDefault();
    
        var formdata = new FormData(this);
        
        $.ajax({
            type: 'POST',
            url: '../controller/loginquery.php',
            data: formdata,
            dataType: 'json',
            processData: false,
            contentType: false,
            success: function(respoadd) {
                if (respoadd.success === 'login') {
                    window.location.replace('../admin/homeadmin.php');
                } else {
                    $('#username-error').html(respoadd.username_error);
                    $('#password-error').html(respoadd.password_error);
                }
            },
            error: function(err) {
                console.log(err);
            }
        });
    })
})

最终效果 #

• 登录验证失败：表单不跳转，页面实时显示对应的错误提示
• 登录验证成功：前端接收到合法JSON响应，自动跳转到homeadmin.php

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