Javascript 如果验证失败,如何使用ajax和php以模态形式显示错误,如果验证成功,如何重定向到其他页面

Javascript 如果验证失败,如何使用ajax和php以模态形式显示错误,如果验证成功,如何重定向到其他页面,javascript,php,bootstrap-modal,Javascript,Php,Bootstrap Modal,我在一个登录页面中工作,这是一个模式表单,当用户单击登录按钮时,模式表单出现 给你 <!-- Signin Window Code --> <div class="modal fade" id="signup" tabindex="-1" role="dialog" aria-labelledby="myModalLabel2" aria-hidden="true"> <div class="modal-dia

我在一个登录页面中工作,这是一个模式表单,当用户单击登录按钮时,模式表单出现 给你

<!-- 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>
当用户验证失败时,它会在模式窗体上显示错误,但问题是如果验证成功,则要重定向的页面会在模式窗体上被覆盖,即它不是重定向,而是在模式窗体上显示下一页 这是我的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>';
}

?>

您不能直接从php重定向,因为您使用了ajax,响应将发送回ajax的
成功函数。现在,要解决此问题,请执行以下操作:

Php代码

if($row[0] > 0)
{
    echo "success";//send back to ajax
}
else
{
     echo "failed";//send back to 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;
  });
});
并在ajax端检查出现了哪些值,并根据这些值重定向或显示错误消息

Ajax代码

if($row[0] > 0)
{
    echo "success";//send back to ajax
}
else
{
     echo "failed";//send back to 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;
  });
});
$('button#logBtn')。单击(函数(){
if($(“#email_login”).val()
$(“div#ack”).html(“请输入用户名或密码”);
其他的
$.post($(“#frmLogin”).attr(“操作”),
$(“#frmLogin:input”).serializeArray(),
功能(数据){
var data=$.trim(data);//如果有空格,请删除空格
如果(数据==“成功”){
window.location.href=“register.php”;//重定向
}否则{
$(“div#ack”).html('输入正确的电子邮件或密码!');//显示错误消息
}
});
$(“#frmLogin”).submit(函数(){
返回false;
});
});

对于Ajax调用,有回调函数。请尝试始终从Ajax调用返回值,并基于此响应在表单中显示错误,或使用JavaScript或Jquery重定向到另一个页面。基本上,在验证之后,尝试向Ajax发送一个正确或错误的响应或一个更好的JSON结构,检查条件并在需要时重定向。那么我应该在Ajax代码中做哪些更改呢?实际上,您并不是在服务器端(PHP)中验证数据,您正在用Javascript验证数据,如果验证成功,您将使用Javascript提交表单。这个
register.php?success
页面是否确实存在并且与当前页面不同?很抱歉,它实际上是register.php。我忘记删除它了?success,但问题仍然是一样的