AJAX登录表单无法正常工作

时间:2018-08-25 08:15:55

标签: javascript php jquery 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;
    });
});

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

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:-1)

使用脚本代替您的脚本

def ranked(a):
    rankw01  = tf.cast(tf.contrib.framework.argsort(tf.contrib.framework.argsort(a)) + 1, tf.float32)
    rankw02  = rankw01 - tf.cast((tf.shape(a)[-1] + 1)/2, tf.float32)
    rankw03  = tf.div(rankw02, tf.reduce_sum(tf.nn.relu(rankw02), axis = -1, keepdims=True))

    return rankw033