使用Ajax登录Php

Php Login With Ajax

本文关键字:Php 登录 Ajax 使用      更新时间:2023-09-26

我正在尝试使用ajax登录,我希望用户登录,如果用户名(电子邮件)和密码正确,页面应该使用.load方法加载页面"perfil.php",我不会发布代码,因为它不相关。然而,即使我键入随机用户/密码,也不会发生任何事情。

我刚开始使用SESSION和AJAX,所以任何帮助都将不胜感激,顺便说一句,我现在不需要关于哈希密码的答案。

指数

<?php
    session_start();
    if(!empty($_SESSION['login_user'])){
        header('Location: user/perfil.php');
    }
?>
<form class="form-signin" id="form-signin" method="post" action="">
<h2 class="form-signin-heading">Sign in</h2>
<input type="email" name="email" id="inputEmail" class="form-control" placeholder="Email address" required="true" autofocus="true">
<input type="password" name="password" id="inputPassword" class="form-control" placeholder="Password" required="true">
<div class="checkbox">
    <label>
        <input type="checkbox" value="remember-me"> Lembrar-me
    </label>
</div>
<button id="entrar" class="btn btn-lg btn-primary btn-block" type="submit" name="submit">Sign in</button>

login.php

<?php
include_once '../config/db.php';
session_start();
if (isSet($_POST['email']) && isSet($_POST['password'])) {
    try {
        $pdo = Database::connect();
        $email = $_POST['email'];
        $password = $_POST['password'];
        $query= "SELECT id FROM utilizador WHERE email = '$email' and pass = '$password'";
        $stmt = $pdo->prepare($query);
        $stmt->execute();  
        $num=$stmt->rowCount();
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        if($num > 0)
            $_SESSION['login_user']=$row['id'];
            echo $row['id'];    
        }
        Database::disconnect();
    }
    catch (Exception $e){
        echo 'Exception: ',  $e->getMessage(), "'n";
    }
}
?>

javascript

$('#entrar').click(function()
{
    var email = $("#inputEmail").val();
    var password = $("#inputPassword").val();
    var dataString = 'email='+email+'&password='+password;
    if($.trim(username).length>0 && $.trim(password).length>0)
    {
        $.ajax({
            type: "POST",
            url: "user/login.php",
            data: dataString,
            cache: false,
            beforeSend: function(){ $("#entrar").val('A entrar...');},
            success: function(data){
                if(data)
                {
                    showNotas();
                    $('#form-signin').fadeOut('slow', function(){
                        $("#section-1 .container").load("user/perfil.php").fadeIn(1500).delay(5000);
                        $("#section-1 span").text("Perfil");
                    });
                    $('#notas').show();
                }
                else
                {
                    $("#entrar").val('Sign in')
                    $("#error").html("<span style='color:#cc0000'>Error:</span> Invalid username and password. ");
                }
            }
        }); 
    }
return false;
});

编辑:Chrome开发没有显示任何错误

Chrome开发工具可能不会在控制台中显示任何错误,但是,请转到"网络"选项卡,单击XHR请求(AJAX将ping文件以请求用户登录,我假设它是user/login.php),然后转到"预览和/或响应"选项卡,查看他们对我们说的话。这很可能只是PHP错误,而不是JavaScript

由于我们不知道问题是什么,所以很难回答您的问题。因此,我只描述了如何解决这种情况的系统方法。

  • 您必须测试代码的每一个部分,以确定问题所在。这意味着:Javascript,PHP,数据库
  • 您应该从PHP开始。也许首先不要使用POST中的数据,而只是硬编码一封电子邮件&密码,然后查看针对数据库的查询是否提供了预期结果。或者查询数据库,但不使用POST中的数据
  • 如果PHP什么都不返回,请确保您已打开错误报告。否则你将不知道为什么有些东西不起作用。这可以通过添加error_reporting(E_ALL)来完成;在PHP代码的顶部,首先是includes和requires
  • 如果这是有效的,试着用post来做。首先提交不带Javascript的表单。您可以使用表单的action属性,然后正常提交。或者你用curl或邮递员之类的东西。查看PHP关于错误报告的说明
  • 现在对Ajax脚本执行相同的POST操作。如果出现任何问题,您可以添加console.log(variable)语句并在控制台中进行监视

哦,在写这一切的时候,我发现您的代码中缺少{。这可能是问题所在…;)

<?php
include_once '../config/db.php';
session_start();
if (isSet($_POST['email']) && isSet($_POST['password'])) {
    try {
        $pdo = Database::connect();
        $email = $_POST['email'];
        $password = $_POST['password'];
        $query= "SELECT id FROM utilizador WHERE email = '$email' and pass = '$password'";
        $stmt = $pdo->prepare($query);
        $stmt->execute();  
        $num=$stmt->rowCount();
        $row = $stmt->fetch(PDO::FETCH_ASSOC);
        if($num > 0) { // THIS WAS MISSING
            $_SESSION['login_user']=$row['id'];
            echo $row['id'];    
        }
        Database::disconnect();
    }
    catch (Exception $e){
        echo 'Exception: ',  $e->getMessage(), "'n";
    }
}
?>

更新

html(更改复选框,添加id)

...
<label>
    <input id="rememberMe" type="checkbox" value="remember-me"> Lembrar-me
</label>
...

js

$('#entrar').click(function( event )
{
    event.preventDefault();
    var email = $("#inputEmail").val();
    var password = $("#inputPassword").val();
    var rememberMe = 'unchecked';
    if ( $('#rememberMe').is(':checked') ){
        rememberMe = 'checked';
    } else {
        rememberMe = 'unchecked';
    }
    $.ajax({
        url: 'user/login.php',
        type: 'POST',
        data:{
            email:email,
            password:password,
            rememberMe:rememberMe
        },
        success: function(data){
            alert(data);
        }
    });
});

user/login.php

session_start();
header('Content-type: text/html; charset=utf-8');
$email = $_POST['email'];
$password = $_POST['password'];
$rememberMe = $_POST['rememberMe'];
$_SESSION['test_email'] = $email;
$_SESSION['test_password'] = $password;
echo 'sessions: <br>' . $_SESSION['test_email'] . ' | ' . $_SESSION['test_password'] . ' | remember me: ' . $rememberMe;

更新

将此代码添加到login.php文件的顶部,以显示php错误

ini_set('display_errors', 1);
error_reporting(~0);

我不知道为什么,但我把$('#entrar').click(function( event )改成了function entrar(),并把它移到了$(document).ready(function()之外,它起了作用。。无论如何,谢谢大家,干杯