使用PHP和AJAX登录表单

时间:2014-12-17 08:07:17

标签: javascript php jquery ajax html5

我只是想尝试登录弹出登录框。我使用AJAX来检查登录是否成功。如果成功移动到标题位置,否则给出错误。 代码如下所示:

<script>
    $(document).ready(function () {
        $('#login').click(function () {
            var email = $("#email").val();
            var pass = $("#pass").val();
            var dataString = 'email=' + email + '&pass=' + pass;
            if ($.trim(email).length > 0 && $.trim(pass).length > 0) {
                $.ajax({
                    type: "POST",
                    url: "ajaxlogin.php",
                    data: dataString,
                    cache: false,
                    success: function (data) {
                        if (data) {
                            $("body").load("index.php").hide().fadeIn(1500).delay(6000);
                            //or
                            window.location.href = "index.php";
                        }
                        else {
                            $("#login").val('Login')
                            $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and   password. ");
                        }
                    }
                });
            }
            return false;
        });
    });
</script>

形式:

<div class="user_login">
    <form action="" method="post">
        <label>Email / Username</label>
        <input type="email" Placeholder="Email-id" name="email" Required="required" id="email"/>
        <br />
        <label>Password</label>
        <input type="password" Placeholder="Password" name="pass" Required="required" id="pass"/>
        <br />
        <div class="checkbox">
            <input id="remember" type="checkbox" />
            <label for="remember">Remember me on this computer</label>
        </div>
        <div class="action_btns">
            <div class="one_half"><a href="#" class="btn back_btn"><i class="fa fa-angle-double-left"></i> Back</a></div>
            <div class="xyx"><input type="submit" value="Login" name="submitm" id="login"/></div>
            <div id="error"></div> 
        </div>
    </form>
    <a href="#" class="forgot_password">Forgot password?</a>
</div>

和php文件分别命名为ajaxlogin.php:

include('includes/db.php');
if (isset($_POST['email']) && isset($_POST['pass'])) {
    $pass = $_POST['pass'];
    $email = $_POST['email'];
    $query = "SELECT * FROM login WHERE email='$email' AND BINARY pass=BINARY '$pass'";
    $result = mysql_query($query);
    if (mysql_num_rows($result) > 0) {
        $_SESSION['user'] = $email;
    }
}

脚本和表单都在同一页面上。我目前得到的输出是错误消息两者是否正确用户名/密码匹配。但如果我删除“return false;”从脚本移动到标题位置而不登录。

2 个答案:

答案 0 :(得分:0)

试试这个剧本,

$(document).ready(function()
{

    $('#login').click(function()
    {
        var email = $("#email").val();
        var pass = $("#pass").val();
        if ($.trim(email).length > 0 && $.trim(pass).length > 0)
        {
            $.ajax({
                type: "POST",
                url: "ajaxlogin.php",
                data: {email:email,pass:pass},
                cache: false,
                success: function(data) {
                    if (data)
                    {
                        $("body").load("index.php").hide().fadeIn(1500).delay(6000);

                        window.location.href = "index.php";
                    }
                    else
                    {

                        $("#login").val('Login')
                        $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and   password. ");
                    }
                }
            });

        }
        return false;
    });

});

答案 1 :(得分:0)

看起来您没有从ajaxlogin.php返回任何数据 所以成功函数总是控制其他并在屏幕上抛出错误信息。

相关问题