Форма входа AJAX не работает должным образом

Question

Я делаю простой портал со страницей входа, но я застрял в проблеме AJAX, поскольку я новичок в AJAX.

У меня есть файл login.php , в котором есть простая html-форма, при нажатии на которую сначала проверяются примерные учетные данные в php-файле с именем test.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

ajax-код с типом данных json

     $("#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'
                    });
            }               
        }
});
});