1

Boa noite, pessoal!

Eu estou tendo um problema com minha aplicação. O problema é o seguinte, eu possuo um formulário para logar e um botão do tipo submit, quando eu clico nesse botão, o formulário é submetido para validar e verificar o login, mas aí, depois de validar eu gostaria que a div atualizasse com o nome do usuário.

Aqui ta o meu código da página visual, onde está o meu formulário e minha função que respectivamente atualizaria a div

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
        $("#menu #formLogin").submit(function(e){
    e.preventDefault();
    var href = "../View/dropdown.php";
    $("#dropdown").load(href + "#dropdown");
        });
});
</script>

<div class="dropdown" id="dropdown">
     <center> <li style="display: block; width: 100px; margin-right: 10px; margin-left: 40px;"><a style="color: #ccc; text-decoration: none;" href="#"> <img src="../images/user.png" width="35px"><br> Minha conta  </a></li> </center>
     <div class="dropdown-content">
         <form name="formLogin" id="formLogin" action="../Controller/verificaLogin.php" method="post">
            <input style="width:250px;" type="email" id="userLogin" name="userLogin" placeholder="Digite seu email">
            <br>
            <input style="width:250px;" type="password" id="userPassword" name="userPassword" placeholder="Digite sua senha">
            <br>
            <input type="submit" value="Entrar" id="btnLogar" name="btnLogar" style="width: 100px;" >
            <a name="recuperaSenha" id="recuperaSenha" href="#"> Esqueci minha senha </a>
            <br> <br>
            <p style="color: #777"> Ainda não pussui conta? <a style="text-decoration: underline;" name="Cadastro" id="Cadastro" href="cadCliente.php"> Cadastre-se </a> </p>
        </form>
     </div>
  </div>

Aqui ta o código que faz a verificação do login

include '../Model/conectaBanco.php'; 
include '../Model/clienteVO.php';
include '../Model/loginDAO.php';
include 'verificaSessao.php';

$cliente = new clienteVO();
$loginDAO = new loginDAO;
$mysqli = new mysqli("localhost", "root", "", "bdAliSantos");


if(NULL !== filter_input(INPUT_POST, "btnLogar")){
    $cliente ->setEmailLogin(filter_input(INPUT_POST, "userLogin"));
    $cliente ->setSenhaLogin(filter_input(INPUT_POST, "userPassword"));
    $senhaVerificar = $cliente->getSenhaLogin();

    if(!$cliente ->getEmailLogin() || !$cliente->getSenhaLogin()){
        echo "<script> alert('Por favor, verifique se digitou seu email e/ou senha corretamente'); document.location.href = '../View/index.php'; </script>";
    } else { 
        $nomeCliente = $loginDAO ->selecionaNome($cliente);
        $senhaCliente = $loginDAO ->selecionaSenha($cliente);
        if(($nomeCliente && $senhaCliente) && ($senhaCliente === $senhaVerificar)){
            if($cliente->getEmailLogin()=== "[email protected]"){
                $_SESSION['nomeUsuario'] = "Admin";
                $_SESSION['senhaUsuario'] = $senhaCliente;
                header("Location: ../View/indexAdm.php");
            }else{
                $_SESSION['nomeUsuario'] = $nomeCliente;
                $_SESSION['senhaUsuario'] = $senhaCliente;
                header("Location: ../View/index.php");
            }
        }
        else{
            header("Location: ../View/index.php");
        }   
    }                
}

E este é o código que eu gostaria que a div carregasse após a submissão

<div class="dropdown" id="dropdown">
<center> <li style="display: block; width: 100px; margin-right: 10px; margin-left: 40px;"><a style="color: #ccc; text-decoration: none;" href="#"> <img src="../images/user.png" width="35px"><br> <?php echo $_SESSION['nomeUsuario']; ?></a></li> </center>
<div class="dropdown-content"  style="padding: 0">
    <ul style="list-style-type: none; margin: 0; width: 200px; padding: 0;">
        <li><a href="../View/minhaConta.php" style="color: #777;"> Minha Conta </a></li>
        <li><a href="#" style="color: #777;"> Meus Pedidos </a></li>
        <li><a href="../View/minhasConfiguracoes.php" style="color: #777;"> Configurações </a></li>
        <li><a href="../Controller/sair.php" style="color: #777;"> Sair </a></li>
    </ul>
</div>

É isso.. Desde já, obrigada >.<

4
  • Uma sessão é iniciada pela função session_start(), a ser colocada no topo da página, antes de qualquer outro código. Você está usando essa função nas suas páginas?
    – user60252
    Commented 19/07/2017 às 3:20
  • Estou sim está no arquivo verificaSessao.php do meu include
    – Jessy
    Commented 19/07/2017 às 3:43
  • Porque não faz o submit por ajax?, assim você irá enviar o submit e dar o retorno no php se for sucesso você faz uma ação no javascript e se não for faz outra... ai dentro desse javascript você faria o insert dessa div Commented 19/07/2017 às 10:54
  • Eu vi q esse submit utiliza o método GET e como estou tratando senha acho q o correto seria tratar com POST Não? Tem como fazer o uso desse método via Ajax?
    – Jessy
    Commented 19/07/2017 às 12:20

1 Resposta 1

1

Para capturar os dados, validar e retornar uma resposta sem atualizar a página, somente fazendo uma requisição assíncrona.

Há um plugin do javascript chamado jQuery Form. Ele possui dois métodos chamados: ajaxForm e ajaxSubmit. Para resolver seu caso, aconselho o ajaxSubmit.

Para utilizá-lo é bem simples:

Basico exemplo do <form>

<form name="ajaxform" id="ajaxform" action="ajax-form-submit.php" method="POST">
    First Name: <input type="text" name="fname" value =""/> <br/>
    Last Name: <input type="text" name="lname" value ="" /> <br/>
    Email : <input type="text" name="email" value=""/> <br/>
</form>
<div id="resposta"></div>

Exemplo Javascript Obs.: O método ajaxSubmit já captura o action="" e o method="" do <form>. Mas caso queira alterar sem ser no form descomente as opções: url e type do var options.

// prepare the form when the DOM is ready 
$(document).ready(function() { 
    var options = { 
        target:        '#resposta',   // div que irá receber a resposta 
        beforeSubmit:  valida,  // pre-submit callback 
        success:       responde  // post-submit callback 
        clearForm: true        // limpa os campos do form após submit 
        resetForm: true        // limpa os campos do form antes submit
        //url:       url         // sobreescreve o action do form 
        //type:      type        // sobreescreve o método 'get' or 'post'
    }; 

    // Aplica o evento de submit do form 
    $('#ajaxform').submit(function() {
        // aplica as configurações do options ao ajaxSubmit
        $(this).ajaxSubmit(options); 

        // !!! Importante !!! 
        // sempre retornar false para evitar o carregamento da página. Por baixo dos panos ele aplica 'event.preventDefault()'.
        return false; 
    }); 
});

// pre-submit callback 
function valida(formData, jqForm, options) { 
    // Aplique as validações do form aqui  
    // O return false previne o submit do form
    // Qualquer retorno ao contrário de false permitirá o submit do form 
    return true; 
} 

// post-submit callback 
function responde(responseText, statusText, xhr, $form)  { 
    //aplique as resposta ao usuário aqui
} 

Outros exemplos

1
  • Obrigada, vai funcionar perfeitamente ♡
    – Jessy
    Commented 19/07/2017 às 12:39

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .