如果驗證失敗，如何使用 ajax 和 php 以模態形式顯示錯誤，如果成功則重定向到其他頁面

Question

我正在一個登錄頁面中工作，這是一個模式表單，當用戶單擊登錄按鈕時，這里會出現一個模式表單是嗎

<!-- Signin Window Code -->
            <div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                     <form action ="login.php" method="POST" id="frmLogin">
                            <div class="new-logwrap">   
                                <div class="form-group">
                                <label>Email</label>
                                <div class="input-with-icon">
                                <input type="email" class="form-control" name="login_email" id = "email_login" placeholder="Enter Your Email" required>
                                <i class="theme-cl ti-email"></i>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label>Password</label>
                                    <div class="input-with-icon">
                                        <input type="password" class="form-control" name="login_pass" id = "pass_login" placeholder="Enter Your Password" required>
                                        <i class="theme-cl ti-lock"></i>
                                    </div>
                                </div>
                                <div class="form-groups">
                                    <button type="submit" name="login" id="logBtn" class="btn btn-primary theme-bg full-width .login">Login</button>
                                </div>                  
                        <!-- error message will show here -->
                                <div id="ack"></div>

我正在使用 ajax 來驗證用戶是否驗證

        $('button#logBtn').click(function(){

            if($("#email_login").val() == "" || $("#pass_login").val() == "")
             $("div#ack").html("please enter username or password");
            else
            $.post($("#frmLogin").attr("action"),
            $("#frmLogin :input").serializeArray(),
            function(data) {    
                $("div#ack").html(data);
            });

            $("#frmLogin").submit(function (){
              return false;
            });
   });

當用戶驗證失敗時，它會在模態表單上顯示錯誤，但問題是如果驗證成功，要重定向的頁面會在模態表單上被覆蓋，即它沒有重定向但在模態本身上顯示下一頁這是我的 php 代碼

<?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']); 
$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)
{
    header("location: register.php"); //some page to redirect
}
else
{
    echo '<div class="alert alert-danger text-center" role="alert">
    Enter correct email or password!
  </div>';
}

?>

Answer 1

您不能直接從 php 重定向，因為您使用了 ajax，響應將發送回 ajax 的success-function 。 現在，要解決這個問題，請執行以下操作：

Php 代碼：

if($row[0] > 0)
{
    echo "success";//send back to ajax
}
else
{
     echo "failed";//send back to ajax
}

並在您的 ajax 端檢查已出現的值，並取決於重定向或顯示錯誤消息。

Ajax 代碼：

$('button#logBtn').click(function() {

  if ($("#email_login").val() == "" || $("#pass_login").val() == "")
    $("div#ack").html("please enter username or password");
  else
    $.post($("#frmLogin").attr("action"),
      $("#frmLogin :input").serializeArray(),
      function(data) {
        var datas = $.trim(data); //remove whitespaces if any 
        if (datas == "success") {
          window.location.href = "register.php"; //redirect
        } else {
          $("div#ack").html('<div class="alert alert-danger text-center" role="alert">Enter correct email or password!</div>'); //show error message 
        }
      });

  $("#frmLogin").submit(function() {
    return false;
  });
});