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

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 DuduBacteria
      Olá,
      table = $('.dataTable').DataTable({ 'destroy':true, 'ajax':{ 'url':DIRPAGE + '/painel/exibir-brinde/todos', 'method':'GET', 'dataSrc':'' }, 'columns':[ {'data':'nome'}, {'data':'doc'}, {'data':'brinde'}, {'data':'data'}, {'data':'empresa'}, {'defaultContent':'<td class="id"><button class="btn btn-success btn-resgatar" value="id_usuario" id_brinde="id_brinde"><i class="fas fa-plus-circle"></i> Resgatar </button></td>'} ] });  
    • By BiancaNunes
      Boa noite.
      Segui os passos de um dos posts daqui, mas não tem opções para fazer mais perguntas por lá, pois o tópico foi arquivado.
      https://forum.imasters.com.br/topic/425852-carregar-p%C3%A1gina-em-div-com-jquery/
       
      Seguinte, tudo funcionou direitinho, entretanto, quando vou salvar os dados dos campos da página que foi carrega dentro da div, em vez de a div manter a página aberta, a página é apagada de dentro da div.
      Alguma solução?
      Desde já agradeço.
    • By BiancaNunes
      Boa noite.
      Segui os passos de um dos posts daqui, mas não tem opções para fazer mais perguntas por lá, pois o tópico foi arquivado.
      https://forum.imasters.com.br/topic/425852-carregar-p%C3%A1gina-em-div-com-jquery/
       
      Seguinte, tudo funcionou direitinho, entretanto, quando vou salvar os dados dos campos da página que foi carrega dentro da div, em vez de a div manter a página aberta, a página é apagada de dentro da div.
      Alguma solução?
      Desde já agradeço.
    • By biza
      Viva pessoal, 
      Estou tentando  fazer uma consulta em que os parâmetros são enviados através do ajax para o php, até aqui tu esta a correr bem. O problema é quando tento resgatar a resposta através do "console.log" é me devolvido "undefined", será que alguém me pode auxiliar com esse pequeno problema?! Em baixo segue o essencial do código do ajax e php.
      AJAX
      $.ajax({ type: 'POST', url:'index2.php?adm='+$pag, data:{send: 1, opt: $option}, //dataType:'json', success: function(result){ console.log(result); } }); PHP
      $data = array(); /*USER OPTION REQUEST*/ if (isset($_POST['send'])){ switch($_POST['opt']){ ... case 3: /*ERASE SELECTED ITEMS*/ $data = array('status'=>'OK'); echo json_encode($data); die; break; } } Supostamente se no console.log adiciona-se "result.status" deveria obter "OK", mas em vez disso obtenho undefined. Caso execute o código da forma que esta obtenho como resultado
      {"status":"OK"}
×

Important Information

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