Javascript AJAX登录表单工作不正常

我正在制作一个带有登录页面的简单门户，但由于我是AJAX新手，我一直被AJAX问题所困扰

我有一个文件login.php，其中有一个简单的html表单，单击它将首先检查名为test.php的php文件中的示例凭据。但是，当输入错误的凭证或没有凭证时，我会在右上角弹出一个jgrowl通知，显示两种类型的错误，第一种是无效凭证，第二种是错误。成功匹配后，它将重定向到index.php文件

以下是我的代码附件：

  <script>
$("#submit").click( function() {
        $.post( $("#login-validation").attr("action"),
        $("#login-validation :input").serializeArray(),
            function(data) {
                var x = data;
                if(x=="ok"){
                    $("#submit").html('Signing In ...');
                    setTimeout(' window.location.href = "index.php"; ',4000);
                }
                else if(x=="error"){
                        $.jGrowl("error", {
                            sticky: false,
                            position: 'top-right',
                            theme: 'bg-blue-alt'
                        });
                } 
                else{
                    $.jGrowl( x , {
                          sticky: false,
                          position: 'top-right',
                          theme: 'bg-blue-alt'
                        });
                }               
            });
    $("#login-validation").submit( function() {
        return false;
    });
});

$（“#提交”）。单击（函数（）{
$.post（$（“#登录验证”）.attr（“操作”），
$（“#登录验证：输入”）.serializeArray（），
功能（数据）{
var x=数据；
如果（x==“正常”）{
$（“#提交”）.html（'登录…'）；
setTimeout（'window.location.href=“index.php””，4000）；
}
否则如果（x==“错误”）{
$.jGrowl（“错误”{
sticky:错，
位置：'右上'，
主题：“背景蓝alt”
});
} 
否则{
$.jGrowl（x{
sticky:错，
位置：'右上'，
主题：“背景蓝alt”
});
}               
});
$（“#登录验证”）.submit（函数（）{
返回false；
});
});

login.php

    <form action="test.php" id="login-validation" class="col-md-4 col-sm-5 col-xs-11 col-lg-3 center-margin" method="post">
        <h3 class="text-center pad25B font-white text-transform-upr font-size-23"><b>Employee Self Service Login</b></h3>
        <div id="login-form" class="content-box bg-default">
            <div class="content-box-wrapper pad20A">
                <img class="mrg25B center-margin radius-all-100 display-block" src="http://54.255.228.114/budget/assets/image-resources/indiannica.png" alt="" >
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon addon-inside bg-gray">
                            <i class="fa fa-envelope-o" aria-hidden="true"></i>
                        </span>
                        <input type="text" class="form-control" id="exampleInputEmail1" placeholder="Enter email" name="email">
                    </div>
                </div>
                <div class="form-group">
                    <div class="input-group">
                        <span class="input-group-addon addon-inside bg-gray">
                            <i class="fa fa-unlock-alt" aria-hidden="true"></i>
                        </span>
                        <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password" name="password">
                    </div>
                </div>
                <div class="form-group">
                    <button type="submit" id="submit" class="btn btn-block btn-primary">Login</button>
                </div>
    </form>

员工自助登录
登录

test.php

   <?php
if($_POST['email']=="123"  && $_POST['password']=="123"){
    echo 'ok';
}else if($_POST['email']=="456"  && $_POST['password']=="456"){
    echo 'error';
}else if($_POST['email']=="789"  && $_POST['password']=="789"){
    echo 'invalid credentials';
}   
else{
    echo '404';
}?>

---

使用脚本而不是您的

<script type="text/javascript">

 $("#login-validation").submit( function(e) {
   e.preventDefault();

   dataVar = { email:$('input[name="email"]').val(), password:$('input[name="password"]').val() }

$.ajax({
      type: "POST",
      url: "test.php",
      data: dataVar,
      dataType: "text",
      success: function(data) {
            var x = data;
            if(x=="ok"){
                $("#submit").html('Signing In ...');
                setTimeout(' window.location.href = "index.php"; ',4000);
            }
            else if(x=="error"){
                    $.jGrowl("error", {
                        sticky: false,
                        position: 'top-right',
                        theme: 'bg-blue-alt'
                    });
            } 
            else{
                $.jGrowl( x , {
                      sticky: false,
                      position: 'top-right',
                      theme: 'bg-blue-alt'
                    });
            }               
        }
});
});

$（“#登录验证”）.submit（函数（e）{
e、 预防默认值（）；
dataVar={email:$（'input[name=“email”]'）.val（），密码：$（'input[name=“password”]'）.val（）}
$.ajax({
类型：“POST”，
url:“test.php”，
数据：dataVar，
数据类型：“文本”，
成功：功能（数据）{
var x=数据；
如果（x==“正常”）{
$（“#提交”）.html（'登录…'）；
setTimeout（'window.location.href=“index.php””，4000）；
}
否则如果（x==“错误”）{
$.jGrowl（“错误”{
sticky:错，
位置：'右上'，
主题：“背景蓝alt”
});
} 
否则{
$.jGrowl（x{
sticky:错，
位置：'右上'，
主题：“背景蓝alt”
});
}               
}
});
});

---

我已经更新了ajax代码和test.php页面

数据类型为json的ajax代码

     $("#login-validation").submit( function(e) {
   e.preventDefault();

   dataVar = { email:$('input[name="email"]').val(), password:$('input[name="password"]').val() }

$.ajax({
      type: "POST",
      url: "test.php",
      data: dataVar,
      dataType: "json",
      success: function(data) {
            var x = data;
            console.log(x);

            if(data.status=="success"){
                $("#submit").html('Signing In ...');
                setTimeout(' window.location.href = "index.php"; ',4000);
            }
            else if(data.status=="error"){
                    $.jGrowl("error", {
                        sticky: false,
                        position: 'top-right',
                        theme: 'bg-blue-alt'
                    });
            } 
            else{
                $.jGrowl( x , {
                      sticky: false,
                      position: 'top-right',
                      theme: 'bg-blue-alt'
                    });
            }               
        }
});
});

只需以json格式响应的test.php页面

<?php
if($_POST['email']=="123"  && $_POST['password']=="123"){
    echo json_encode(array('status'=>"success"));
}else if($_POST['email']=="456"  && $_POST['password']=="456"){
    echo json_encode(array('status'=>"error"));
}else if($_POST['email']=="789"  && $_POST['password']=="789"){
    echo json_encode(array('status'=>"error"));
}   
else{
   echo json_encode(array('status'=>"404"));
}?>

请阅读-总结是，这不是向志愿者讲话的理想方式，可能会对获得答案产生反作用。请不要将此添加到您的问题中。您可以使用浏览器中的网络面板跟踪AJAX操作。您得到的响应代码是什么？你应该得到200英镑。响应的主体是什么？您缺少阻止表单提交的默认行为。为什么要使用此脚本而不是他的脚本？请试着用你所更改/添加/删除的内容来回答。这些类型的答案既没有帮助也不可理解，答案应附有解释，以使阅读者受益。请尝试理解我的观点。非常感谢您的帮助，但我尝试了您的脚本，但它也显示了相同的内容，并且在成功登录时没有重定向到index.php页面。我认为php和这个脚本之间可能存在一些差距。i、 对于我们从php发送的数据，我们的脚本无法根据if条件进行处理。如果您通过json数据类型传递ajax post，它将起作用。目前它正在以文本格式传递post数据。下面我添加了错误的正确答案。