Jump to content
ricardonews

logar no banco com ajax e jquery

Recommended Posts

 Olá pessoal, fiz 2 formularios  de login em jquery e ajax, um eu vi na internert o modelo então fiz umas adaptações e funcionou com meu banco de dados. porem o outro que fiz baseado nele não funcionou. vou postar aqui pra voces o funcionando e o não funcionando, alguém pode me dar uma ajuda?, dizer que erro é esse? ele simplesmente não loga e não aparece erros no console.

<!doctype html>
<html>
<?php
    require_once"config.php";
?>
    <head>
        <title>APRENDIZ DE JS</title>
        <link href="style.css" rel="stylesheet" type="text/css">

        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){

                $("#but_submit").click(function(){
                    var username = $("#meu_nome").val().trim();
                    var password = $("#minha_senha").val().trim();

                    if( username != "" && password != "" ){
                        $.ajax({
                            url:'pesquisar.php',
                            type:'post',
                            data:{username:username,password:password},
                            success:function(response){
                                var msg = "";
                                if(response == 1){
                                    window.location = "home.php";
                                }else{
                                    msg = "Invalid username and password!";
                                }
                                $("#message").html(msg);
                            }
                        });
                    }
                });

            });
        </script>
    </head>
    <body>
        
        <div class="container">

            <div id="div_login">
                <h1>Login</h1>
                <div id="message"></div>
                <div>
                    <input type="text" class="textbox" id="meu_nome" name="meu_nome" placeholder="Username" />
                </div>
                <div>
                    <input type="password" class="textbox" id="minha_senha" name="minha_senha" placeholder="Password"/>
                </div>
                <div>
                    <input type="button" value="logar" name="but_submit" id="but_submit" />
                </div>
            </div>

        </div>
    </body>
</html>

/* Container */
.container{
    width:40%;
    margin:0 auto;
}

/* Login */
#div_login{
    border: 1px solid gray;
    border-radius: 3px;
    width: 470px;
    height: 270px;
    box-shadow: 0px 2px 2px 0px  gray;
    margin: 0 auto;
}

#div_login h1{
    margin-top: 0px;
    font-weight: normal;
    padding: 10px;
    background-color: cornflowerblue;
    color: white;
    font-family: sans-serif;
}

#div_login div{
    clear: both;
    margin-top: 10px;
    padding: 5px;
}

#div_login .textbox{
    width: 96%;
    padding: 7px;
}

#div_login input[type=submit]{
    padding: 7px;
    width: 100px;
    background-color: lightseagreen;
    border: 0px;
    color: white;
}

#message{
    width:100%;
    text-align:center;
    color:red;
}
/* media */
@media screen and (max-width:720px){
    .container{
        width: 100%;
    }
    #div_login{
        width: 99%;
    }
}

<?php
    require_once "config.php";
 // AQUI É O PESQUISAR PHP
$uname = mysqli_real_escape_string($con,$_POST['username']);
$password = mysqli_real_escape_string($con,$_POST['password']);


if ($uname != "" && $password != ""){

    $sql_query = "SELECT count(*) as cntUser FROM usuarios WHERE username='".$uname."' and password='".$password."'";
    $result = mysqli_query($con,$sql_query);
    $row = mysqli_fetch_array($result);

    $count = $row['cntUser'];

    if($count > 0){
        $_SESSION['uname'] = $uname;
        echo 1;
    }else{
        echo 0;
    }

}
<?php
    require_once "config.php";
    // AQUI É A HOME.PHP
// Check user login or not
if(!isset($_SESSION['uname'])){
    header('Location: index.php');
}

// logout
if(isset($_POST['but_logout'])){
    session_destroy();
    header('Location: index.php');
}
?>
<!doctype html>
<html>
    <head>
    <title>SEJA BEM VINDO!</title>
    </head>
    <body>
        <h1>PÁGINA INICIAL</h1>
        <form method='post' action="">
            <input type="submit" value="SAIR" name="but_logout">
        </form>
    </body>
</html>
<?php
// ESSE AQUI É A CONFIG.PHP
session_start();

$host = "localhost"; /* Host name */
$user = "root"; /* User */
$password = ""; /* Password */
$dbname = "login2"; /* Database name */

$con = mysqli_connect($host, $user, $password,$dbname);
// Check connection
if (!$con) {
  die("Connection failed: " . mysqli_connect_error());
}

Então pessoal, até aqui funciona normal .

agora a linha abaixo é oque não funciona e eu vou postar só a index e o css porque repete o de cima.

se alguém poder me ajudar eu fico grato. desde já muito obrigado



<html>
<?php
    require_once"config.php";
?>
	<head>
		<title>Formulario de login </title>
		<link href="css/style.css" rel="stylesheet" type="text/css" />
        <script src="jquery-3.2.1.min.js" type="text/javascript"></script>

        <script type="text/javascript">
            $(document).ready(function(){

                $("#but_submit").click(function(){
                    var username = $("#meu_nome").val().trim();
                    var password = $("#minha_senha").val().trim();

                    if( username != "" && password != "" ){
                        $.ajax({
                            url:'pesquisar.php',
                            type:'post',
                            data:{username:username,password:password},
                            success:function(response){
                                var msg = "";
                                if(response == 1){
                                    window.location = "home.php";
                                }else{
                                    msg = "Invalid username and password!";
                                }
                                $("#message").html(msg);
                            }
                        });
                    }
                });

            });
        </script>
		
	</head>

	<body>
		<form id="formulario" method="post">
			<fieldset>
				<h2>Configuracoes da conta</h2>
				<h3>Area de login </h3>
				<input type="text"  id="meu_nome"name="meu_nome" placeholder="username" />
				<input type="password" id="minha_senha " name="minha_senha" placeholder="digite sua senha" />
				<input type="submit" class="next acao" value="Logar" />
			</fieldset>

	</body>
</html>

agora é o css

*{margin:0; padding:0;}
html{
	height:100%;
	background: linear-gradient(rgba(38, 128, 101, 0.9), rgba(52, 177, 140, 0.9));
}
.erros, .ok
{
	width:390px;
	padding:5px;
	background:rgba(238, 249, 113, 0.9);
	margin: 20px auto 0 auto;
	border: 1px solid rgba(222,239,10,0.9);
	border-radius: 4px;
	color: #333;

}
.ok{background: rgba(155,222,143,0.9);border-color: rgba(68, 171, 50, 0.9);color:white;}
body{
	font-family: "Trebuchet MS", tahoma, arial;
}

#formulario{
	width:500px;
	margin:40px auto;
	text-align:center;
	position:relative;
}
#formulario fieldset{
	background:white;
	border:0 none;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;

	box-shadow:0 0 15px 1px rgba(0,0,0, 0.4);
	padding:20px 30px;

	box-sizing: border-box;
	width:80%;
	margin:0 10%;
	position:absolute;
}
#formulario input, #formulario textarea{
	padding:10px;
	border:1px solid rgba(38, 128, 101, 0.9);
	border-radius:4px;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	outline:none;
	box-sizing: border-box;
	width:100%;
	font:14px "Trebuchet MS", tahoma, arial;
	color:#090;
	margin-bottom:10px;
}
#formulario .acao{
	width:100px;
	background:rgba(38, 128, 101, 0.9);
	color:white;
	text-transform:uppercase;
	font-weight:bold;
	padding:12px 0;
	float:left;
	margin-right:5%;
}
#formulario .acao:hover{background:rgba(52, 177, 140, 0.9); cursor:pointer;}

 

Edited by ricardonews
na pressa eu não tinha visto o erro na pergunta

Share this post


Link to post
Share on other sites

Retorna algum erro PHP/JS?

 

Olhando por cima, aparentemente está tudo ok a consulta no banco, você verificou se chegou no 'pesquisar.php'? Está entrando no evento de OnClick do jQuery?

 

De um var_dump($_POST);exit; no 'pesquisar.php' e veja no network se está chegando lá. Se chegar no PHP, debugge o retorno da consulta.

Share this post


Link to post
Share on other sites

Obrigado pela dica, eu vou dar uma olhada nisso que ainda não vi, mas eu fiz o teste parecia não ser com o php, mas eu posso estar engando.

Share this post


Link to post
Share on other sites

Marcosmarcolin, desculpa pela falha, na correria eu havia colocado apenas o que estava funcionando, e não coloquei oque não estava funcionando, eu alterei a e pergunta e coloquei oque não estava funcionando também junto com oque estava funcionando. desculpa mesmo pela confusão.

Share this post


Link to post
Share on other sites

Seu Ajax não está disparando porque não está pegando o evento de 'onClick' que você espera no jQuery:

 

// Espera o click no botão #but_submit
$("#but_submit").click(function(){	
	// código
});

// seu botão está sem o ID que você espera
<input type="submit" class="next acao" value="Logar" />
  
// basta adicionar o id no botão
<input type="submit" id="but_submit" class="next acao" value="Logar" />
  

Testa aí e retorna.

Share this post


Link to post
Share on other sites

Marcosmarcolin, não sei oque houve, mas não funcionou eu fiz um outro usando apenas o css dele porque foi oque se aproveitou . eu fiz assim :

$("#but_submit").click(function(){
                    var username = $("#meu_nome").val().trim();
                    var password = $("#minha_senha").val().trim();

<input type="password" id="minha_senha " name="minha_senha" placeholder="digite sua senha" />
                <input type="submit" id="but_submit" class="next acao" value="Logar" />

até agora eu não entendi porque dessa maneira não funciona.

 

 

Share this post


Link to post
Share on other sites

Segue exemplo funcional, veja abaixo:

Spoiler

index.php

 


<html>
<head>
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>

<script type="text/javascript">
    $(document).ready(function(){
        $("#btn_enviar").click(function(){

			var username = $("#meu_nome").val();
            var password = $("#minha_senha").val();

            $.ajax({
                type: 'POST',
                url: 'pesquisar.php',
				dataType: 'json',
				data: {username:username, password: password},
                success: function(data) {
                    $("#div1").text(data);
                }
            });
   });
});
</script>

</head>

<body>
			<fieldset>
				<h2>Configuracoes da conta</h2>
				<h3>Area de login </h3>
				<input type="text"  id="meu_nome"name="meu_nome" placeholder="username" />
				<input type="password" id="minha_senha" name="minha_senha" placeholder="digite sua senha" />
				<input type="submit" id='btn_enviar' class="next acao" value="Logar" />
			</fieldset>


	<div id="div1">Vazio!</div>

</body>
</html>

pesquisar.php

 


<?php

echo json_encode('Preenchendo com retorno Ajax!');exit;

 

 

Irá preencher a #div1 com o retorno do Ajax, tratando como um JSON. Veja mais sobre json_encode e ajax.

Share this post


Link to post
Share on other sites

aqui está a tabela só falta voce criar o banco

-- phpMyAdmin SQL Dump
-- version 4.8.5
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: 22-Jun-2019 às 18:05
-- Versão do servidor: 10.1.38-MariaDB
-- versão do PHP: 7.2.17

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET AUTOCOMMIT = 0;
START TRANSACTION;
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Database: `login2`
--

-- --------------------------------------------------------

--
-- Estrutura da tabela `usuarios`
--

CREATE TABLE `usuarios` (
  `id` int(11) NOT NULL,
  `nome` varchar(100) NOT NULL,
  `sobrenome` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `telefone` varchar(100) NOT NULL,
  `facebook` varchar(100) NOT NULL,
  `twitter` varchar(100) NOT NULL,
  `google` varchar(100) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4;

--
-- Extraindo dados da tabela `usuarios`
--

INSERT INTO `usuarios` (`id`, `nome`, `sobrenome`, `email`, `password`, `telefone`, `facebook`, `twitter`, `google`) VALUES
(75, 'ar', 'dfsf', 'ff@bol.com', '264589', '5511981905686', 'http://facebook.com', 'http://facebofok.com', 'http://facebuook.com'),
(104, 'mister', 'bin', 'shadol@shadol', '7f99595cb5591cedc902395e4ecf1dde', '5516981905686', 'http://facebook1.com', 'http://twitter.com', 'http://google.com'),
(106, 'asd', 'afaf', 'a@nnn', '7f99595cb5591cedc902395e4ecf1dde', '5517981905686', 'http://facebook.com', 'http://facebook.com', 'http://facebook.com'),
(107, 'cai', 'fora', 'mane@mane', '7f99595cb5591cedc902395e4ecf1dde', '5510981905686', 'http://sei.com', 'http://manent.com', 'http://seila.com'),
(108, 'cai', 'fora', 'mane@mane', '7f99595cb5591cedc902395e4ecf1dde', '5510981905686', 'http://sei.com', 'http://manent.com', 'http://seila.com');

--
-- Indexes for dumped tables
--

--
-- Indexes for table `usuarios`
--
ALTER TABLE `usuarios`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT for dumped tables
--

--
-- AUTO_INCREMENT for table `usuarios`
--
ALTER TABLE `usuarios`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=109;
COMMIT;

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By danicarla
      OI gente, gostaria de de ideias de como posso desenvolver um player que tenha mais de uma faixa...

      Algo semelhante a isso: https://www.karaoke-version.com/custombackingtrack/u2/beautiful-day.html
       
      Alguém tem alguma idéia de como fazer?
    • By HigorCrds
      Bom, o que eu consegui até agora foi fazer com que, ao usuário clicar em algum dos botões de paginação (1, 2, 3...) o PHP guarde uma SESSION com o número da página correspondente.
      Segue o código:
       
      <!-- BOTÃO COM O NÚMERO DA PÁGINA --> <button onclick="mudaVar(<?php echo $i; ?>);"> <?php echo $i; ?> </button> <!-- FUNÇÃO PARA GUARDAR SESSION PG --> function mudaVar(valor) { $.ajax({ url:'sessions.php?valor='+valor }); } // GUARDA SESSION PG if(isset($_GET['valor'])){ $_SESSION['pg'] = $_GET['valor']; } Até aí tudo bem, só que o problema é que a SESSION não é alterada naquele momento, só quando eu atualizo a página.
      Como corrigir isso?
    • By FabianoSouza
      Tenho a function A, que captura valores e os transfere para a function B (que é um AJAX).
       
      Preciso que a function B passe seu resultado para a function A. Creio que precise de um callback. Mas não estou sabendo com estruturar isso.
      Vejam como estão os códigos:
       
      FUNCTION A
      function upDateRating(e) { var $alvoClick = getTarget(e) , $ul = $alvoClick.parentNode , $idItem = $alvoClick.parentNode.parentNode.parentNode.parentNode.id , $valRating = $alvoClick.value var $array = [ { idItem:$idItem , favorito: 1 , rating: $valRating } ] upDateCard($array) }  
      FUNCTION B (AJAX)
      function upDateCard(e) { var $array = e , $dados = JSON.stringify($array); function ajax() { var $obj = createXMLHTTP(); $obj.open('post', 'minhaPagina', true); $obj.setRequestHeader('content-type', 'application/x-www-form-urlencoded'); $obj.onreadystatechange=function(){ if ($obj.readyState == 4 && $obj.status == 200){ try { var $strResp = JSON.parse($obj.responseText); } catch(e) { alert('Erro. Dados em formato inválido.') return false; } return $strResp //PRECISO PASSAR ESSE VALOR DE VOLTA PARA A FUNCTION A } } $obj.send(encodeURI('str='+$dados)) } ajax() }  
       
    • By Danilo - Jesus voltará!
      Olá, estou fazendo um cálculo de horas para cartão ponto em php e jquery... o cálculo do php já consegui um satisfatório. Preciso agora ao preencher os campos que são gerados dinamicamente de 1 a 31 que são os dias do mês, ao sair do campo Jornada (horas de trabalho), ele envie via ajax os valores preenchidos nesses 4 campos anteriores que são 4 inputs de tempo (time).
      Eu consegui recuperar individualmente, mas ele passa a chamada da função em todos, se dou um alert por exemplo ele percorre todos os campos dinâmicos para aí ir para o outro input, que no caso acontece a mesma coisa, segue o script que utilizei para pegar o valor do input individual, aí preciso que não percorra todos e pegue apenas o valor de cada um no onblur do campo jornada conforme está na figura e me retorne para os campos específicos com os dados que pegarei no php,. Espero ter sido claro, se alguém puder ajudar eu agradeço.
       
      $(document).ready(function() { $(":input").blur(function() { var id = $(this).attr('id'); var value = $(this).val(); alert(id + " " + " " + value); }); }); O que preciso está na figura abaixo:
       

       
      Aguardo, se alguém puder ajudar...agradeço
       
    • By Infra Comnet
      Estou reaprendendo o javascript desde que entrei no novo trabalho, então estou criando um projetinho simples em html com javascript dentro do html, aí ok. Googleando umas coisas que preciso para associar aos poucos no meu projetinho, encontrei através do site CodePen.io um esboço feito por alguém, daí nele continha a função era o que eu precisava (preencher os campos que automaticamente puxa para o textarea, além de substituir as palavras) , daí peguei as funções e botei no meu código-fonte de html, mas não funcionou em qualquer navegador e achei estranho. acrescentei a linha de script que chama o tal jquery do esboço de onde encontrei, testei e nada. Daí criei meu usuário no CodePen.io, joguei os códigos nele, testei e funcionou... aí achei estranho se funciona no CodePen.io e não funciona nos navegadores.
      Então vou explicar o que acontece: Pelo CodePen.io (acesse neste link com os códigos que fiz: https://codepen.io/InfraComnet/pen/JQbrMV ), o campo Código quando digitado (que será substituído por select para selecionar em vez de digitar números) está puxando conteúdo para a textarea e está ok, e os campos nome e técnico digitados estão substituindo normal. Agora nos navegadores, mesmo digitando nos campos, nada aparece no textarea.
      Um detalhe: como falei antes que estou reaprendendo o javascript, então o jquery é uma coisa nova para mim (não conheço quase nada de jquery, por isso que cacei as funções prontas e pede o src de jquery para funcionar, daí é tenso), então para que as coisas funcionem, eu botei a linha de comando da script de jquery para que possa executar as tarefas funcionando igual ao que acontece no CodePen.io, mas não tá funcionando. Já o outro projetinho que montei, tb usa o jquery (mas diferente deste) e está funcionando. Não sei onde está o erro. E outra, estou usando o Notepad++ pra mim trabalhar nos códigos de html, css e, aos poucos, javascript.
      Veja o código completo abaixo:
      <html> <head><title>SCRIPT COLETA DE INFORMAÇÕES - TESTE</title></head> <!-- Script com link de JQuery --> <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> var dados = [{"codigo": "1", "Nome": ["AVISO PADRÃO / XXXXXX / XXXXXXXX) NÃO CADASTRADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) AUTORIZA CADASTRADO"]},              {"codigo": "2", "Nome": ["LEMBRETE / XXXXXX / XXXXXXXX) AGENDADO",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) VERIFICAR ORDEM DE SERVIÇO"]},              {"codigo": "3", "Nome": ["REINCIDÊNCIA / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) PROBLEMA REINCIDENTE"]},              {"codigo": "4", "Nome": ["REAGENDAMENTO / XXXXXX / XXXXXXXX)",                                          "AVISO PADRÃO / (NOME CLIENTE / RESPONSÁVEL) FEITO NOVO AGENDAMENTO"]},             ]; $('input[name="codigo"]').change(function(){   $('textarea[name="nome pessoal"]').val(pegaNome($(this).val())); }); $('input[name="nome"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXX ',` ${nome} `)); }); $('input[name="tecnico"]').change(function(){   var nome = $(this).val();   var text = $('textarea[name="nome pessoal"]').val();   $('textarea[name="nome pessoal"]').val(text.replaceAll(' XXXXXXXX',` ${nome} `)); }); function pegaNome(cod){   var nome  = "Não existe na lista"   var nomes = "";      $.each(dados, function(i, val){     if (val.codigo == cod)       {         nome = val.Nome;         $.each(nome, function(index, value){           nomes += value + '\n\n';         });         }     });   return nomes; } String.prototype.replaceAll = function(searchStr, replaceStr) {     var str = this;     searchStr = searchStr.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&');     return str.replace(new RegExp(searchStr, 'gi'), replaceStr); }; </script> <body> <!-- Exibindo na página nos navegadores --> <tr>   <td>     Código:<input type="text" name="codigo" size="5">     Cliente: <input type="text" name="nome" size="28"></td></br>     Técnico: <input type="text" name="tecnico" size="28"></br></br>     <textarea name="nome pessoal" rows="10" cols="50"></textarea>   </td> </tr> </body> </html>  
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.