AJAX登录表单无法正常工作

Question

我正在制作一个带有登录页面的简单门户，但是由于我是AJAX的新手，所以我陷入了AJAX问题。

我有一个login.php文件，单击它时有一个简单的html表单，它将首先检查名为test.php的php文件中的示例凭证。 但是，在输入错误的凭证或没有凭证时，我正在使用jgrowl通知在右上角弹出，显示两种错误，第一种是无效凭证 ，第二种是error 。 匹配成功后，它将重定向到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;
    });
});

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';
}?>

Answer 1

我已经更新了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'
                    });
            }               
        }
});
});

test.php页面仅需要以json格式响应

<?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"));
}?>

Answer 2

使用脚本代替您的

<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'
                    });
            }               
        }
});
});