Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Login com Jquery

Bom dia, agradeceria ajuda. Não consigo fazer chamada ao BD utilizando o arquivo loginRegister.js abaixo. Onde estou errando?

html

<!--Login Form utilizar: onclick="loginAjax()"-->
                                <div class="form loginBox">
                                    <form method="post" action="/login" accept-charset="UTF-8">
                                    <input id="email" class="form-control" type="text" placeholder="Email" name="login">
                                    <input id="password" class="form-control" type="password" placeholder="Senha" name="senha">
                                    <input type="submit" class="btn btn-default btn-login"  value="Entrar" onclick="loginAjax()">

                                    </form>
                                </div>
                                 <!--End Login Form -->

loginRegister.js

function loginAjax(){
    /*   Remove this comments when moving to server   */
   $.post( "login.php", function( data ) {
            if(data == 1){
                window.location.replace("../cadastro-lojista.php");            
            } else {
                 shakeModal(); 
            }
        });


/*   Simulate error message from the server   */
     shakeModal();
}

login.php

<?php ini_set('display_errors', 1);?>
<?php error_reporting(E_ALL);?>
<?php
require_once '../recursos/conecta.php';
require_once '../banco/banco-usuario.php';
require_once '../beans/logica-usuario.php';

$usuario = buscaUsuario($conexao, $_POST["login"], $_POST["senha"]);
if($usuario == null) {
  header("Location: teste.php?login=0");
  } else {
    logarUsuario($usuario["login"]);
  header("Location: incluir.php?login=1");
  }
  var_dump($usuario);exit;

banco-usuario.php

<?php
function buscaUsuario($conexao, $login, $senha){

    $query = "select * from lojista where email='{$login}'
    and senha='{$senha}'";
    $resultado = mysqli_query($conexao, $query);
    $usuario = mysqli_fetch_assoc($resultado);
    return $usuario;
    }
5 respostas

Fala aí Sergio, tudo bem? Eu chutaria que o problema está no botão.

Seu botão está definido somo submit assim irá submeter o form, tente trocá-lo para button:

<button type="button" onclick="loginAjax()">...</button>

Espero ter ajudado.

Oi Matheus, muito obrigado pelo seu retorno, alterei para button e o comando volta para a tela de login informando "Combinação email/senha inválidas". Ainda não sei se as informações estão chegando no BD para verificação porque o login e senha estou copiando de lá para fazer o login. Como posso verificar isso? Obrigado.

Para fazer essa verificação você pode ver as requisições na aba Network (no caso em inglês) do Chrome, lá ele irá logar as requisições.

Nesses logs é possível ver os cabeçalhos, body, URL, parâmetros, etc...

Espero ter ajudado.

Oi Matheus, obrigado pela dica!! Abri o console Network e consegui verificar o que está acontecendo. Os dados não estão chegando no login.php Não sei se estou entendendo corretamente a lógica deste login pelo JQuery:

no index.php eu passo os valores de login e senha pelo name

<form method="post" action="/login" accept-charset="UTF-8">
                                    <input id="email" class="form-control" type="text" placeholder="Email" name="login">
                                    <input id="password" class="form-control" type="password" placeholder="Senha" name="senha">
                                    <input type="button" class="btn btn-default btn-login"  value="Entrar" onclick="loginAjax()">

                                    </form>

o método onclick chama a função loginAjax();

function loginAjax(){
    /*   Remove this comments when moving to server   */
   $.post( "login.php", function( data ) {
            if(data == 1){
                window.location.replace("../cadastro.php");            
            } else {
                 shakeModal(); 
            }

        });

     shakeModal();
}

A função loginAjax deve enviar ao login.php os dados login e senha, e o login.php por sua vez chamar o buscaUsuario no BD e retornar o $usuario e em caso de sucesso redireciona para pagina-principal.php

login.php

<?php
require_once 'recursos/conecta.php';
require_once 'banco/banco-usuario.php';
require_once 'beans/logica-usuario.php';

$usuario = buscaUsuario($conexao, $_POST["login"], $_POST["senha"]);

var_dump($usuario);exit;

if($usuario == null) {
  header("Location: index.php?login=0");
  } else {
    logarUsuario($usuario["login"]);
  header("Location: pagina-principal.php?login=1");
  }

No arquivo login eu fiz um var_dump para verificar o que está retornardo do $usuario e ele retorna

<br />
<b>Notice</b>:  Undefined index: login in <b>C:\Bitnami\wampstack-7.1.13-1\apache2\htdocs\debitotal\login.php</b> on line <b>8</b><br />
<br />
<b>Notice</b>:  Undefined index: senha in <b>C:\Bitnami\wampstack-7.1.13-1\apache2\htdocs\debitotal\login.php</b> on line <b>8</b><br />
NULL

Eu gostaria de saber se no lugar do function( data ) da função loginAjax(), eu não deveria passar no $POST o "login" e "senha" do usuário? Ou o JQuery já sabe que o (data) é o "login" e "senha" e envia automaticamente ao login.php esses parametros.???

Outra dúvida é que se no loginAjax() eu já tenho a condicional if eu não preciso da mesma condicional no login.php?? Caso não, como ficaria? será que tendo 2 condicionais eu terei problema?

if(data == 1){
                window.location.replace("../cadastro.php");            
            } else {
                 shakeModal(); 
            }
solução!

Fala aí Sergio, tudo bem? Acho que tem alguns problemas.

Retira o action do form e adicione o loginAjax no onsubmit.

Dai no botão, pode voltar para submit o seu type e retira o onclick.

Depois, na sua função loginAjax eu não vi em nenhum momento você montando o JSON para enviar para o PHP.

Nunca fiz um AJAX para um arquivo PHP, acredito que esteja faltando informações no seu $.post, normalmente você precisa montar um objeto JSON no data para enviar no body da requisição.

Algo nesse sentido:

$.post( "test.php", { name: "John", time: "2pm" })
    .done(function( data ) {
        alert( "Data Loaded: " + data );
    });

Repare que o segundo parâmetro é um JSON com os dados que devem chegar para o test.php.

Espero ter ajudado.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software