Ir para conteúdo
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;}

 

Editado por ricardonews
na pressa eu não tinha visto o erro na pergunta

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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.

 

 

Compartilhar este post


Link para o post
Compartilhar em outros 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.

Compartilhar este post


Link para o post
Compartilhar em outros 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 */;

 

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

  • Conteúdo Similar

    • Por Thiago Duarte
      Oi, gostaria de arrastar imagem e ao soltar formar bloco html, meu bloco de html ficaria com nome, content-1.html, content-2.html, etc
       
      Alguem pode me ajudar?
    • Por ILR master
      Salve galera.
       
      Vou publicar um evento e quero colocar um Cronômetro regressivo que mostre em tempo real os dias, horas e minutos que faltam para determinada data, tipo:.
      Faltam 5 dias, 12:30:00 para inauguração.
       
      Qdo chegar no dia, quero que apenas apareça uma mensagem.
       
      Alguém pode me ajudar?
    • Por ment0r
      Boa noite pessoal, tudo bem?
       
      Estou desenvolvendo um sistema simples com exibição de formulário via modal. Uma vez cadastrado o serviço (tabela possui apenas dois campos, id e nome), eles são exibidos numa tabela com um ícone que permite a alteração do nome.

       
      Eu clico no ícone e é chamado um modal que é gerado via ajax (pois são vários registros).
       

       
      Nesse modal é mostrado o serviço e uma vez alterado, o botão Salvar chama uma função que atualiza a tabela servico, concluindo a tarefa. Fiz o mesmo processo pra cadastrar o serviço, com a diferença de que o modal está presente na mesma página, ou seja, não é chamado via ajax.
       
      Eis os códigos:
      <a href="#" onclick="modalUpdate(<?= trim($array['id']) ?>)"> <i class='bx bx-edit'></i> </a> // Trecho onde eu chamo a função modalUpdate. Função btAltServico click:
      $('#btAltServico').click(function() { var inpnome = $('#nome'); var inpid = $('#id'); if (inpnome.val() == '') { swal("Atenção", "Por favor, preencha os campos obrigatórios", "warning"); if (inpnome.val() == '') { inpnome.css("border","2px solid #f94545"); } else { inpnome.css("border",""); } alert(inpnome); alert(inpid); } else { $.ajax({ url: '../inc/ajax/altServico.php', type: 'post', dataType: 'json', // pode ser html data: { nome : inpnome.val(), id : inpid.val() }, success: function(resposta){ if (resposta == 1) { inpnome.val(""); inpnome.css("border",""); swal("Sucesso", "Serviço alterado", "success"); } else { if (resposta == 0) { swal("Erro", "Serviço não alterado. Log de erro gerado.", "error"); } else { swal("Atenção", "Serviço já cadastrado", "warning"); } } } }) } });  
      E modalUpdate.php :
       
      <?php /* * altServico.php * * Script responsável pelo update de serviços na tabela servico * * Função chamada pelo arquivo ajax.js */ //if ($_POST) { require'../conn.php'; require'../../class/class.geral.php'; $geral = new Geral(); $nome = $_POST['nome']; $id = $_POST['nome']; $ativo = 1; // Verifica se o servico já foi cadastrado $sqlVer = "select nome from algo68_db_cliente.servico where nome = '".$nome."' and id <> ".$id.""; $queryVer = mysqli_query($conn, $sqlVer); $resultVer = mysqli_num_rows($queryVer); if ($resultVer > 0) { echo json_encode(2); // servico já cadastrado } else { // Update do servico $sql = "update algo68_db_cliente.servico set nome = '".$nome."', ativo = ".$ativo." where id = ".$id; $query = mysqli_query($conn, $sql); $result = mysqli_affected_rows($conn); if ($result > 0) { echo json_encode(1); // alterou o servico } else { $geral->logErro(date('d/m/Y|H:i:s'), @$_SERVER[REQUEST_URI], 'AlterarServico', mysqli_error($conn)); echo json_encode(0); // não alterou o servico } } //} ?> O problema é que quando clico no botão Salvar, não acontece nada - se eu colocar um alert qualquer na função click, só pra saber se está chegando, também não da nada. E está da mesma forma que o cadastro de serviço, que funciona perfeitamente.

      Bom, é isso pessoal, tentei ser o mais breve e especifico possível. Qualquer ajuda é bem vinda, obrigado a todos, desde já.
    • Por gersonab
      bom dia
      tenho uma aplicação onde gero um arquivo em pdf, gostaria de recuperar a url do pdf q foi criado, pois quando este é criado ele abre automaticamente e ou ja faz o download do mesmo, preciso da url para enviar para outros.
      <button type="button" class="btn btn-outline-primary" onclick="createPDF();">Imprimir</button> <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.4.1/jspdf.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/canvas2image@1.0.5/canvas2image.min.js"></script> <script language="javascript"> (function($){ $.fn.createPdf = function(parametros) { var config = { 'fileName':'html-to-pdf' }; if (parametros){ $.extend(config, parametros); } var orig = $(this); var widthOrig = $(orig).width(); $(orig).width(900); var quotes = document.getElementById($(orig).attr('id')); html2canvas(quotes, { onrendered: function(canvas) { var pdf = new jsPDF('p', 'pt', 'letter'); for (var i = 0; i <= quotes.clientHeight/900; i++) { var srcImg = canvas; var sX = 0; var sY = 900*i; var sWidth = 900; var sHeight = 900; var dX = 0; var dY = 0; var dWidth = 900; var dHeight = 900; window.onePageCanvas = document.createElement("canvas"); onePageCanvas.setAttribute('width', 900); onePageCanvas.setAttribute('height', 900); var ctx = onePageCanvas.getContext('2d'); ctx.drawImage(srcImg,sX,sY,sWidth,sHeight,dX,dY,dWidth,dHeight); var canvasDataURL = onePageCanvas.toDataURL("image/png", 1.0); var width = onePageCanvas.width; var height = onePageCanvas.clientHeight; if (i > 0) { pdf.addPage(612, 791); } pdf.setPage(i+1); pdf.addImage(canvasDataURL, 'PNG', 20, 40, (width*.62), (height*.62)); // Retirar o comentário caso queira ver como está sendo gerado o canvas. //document.body.appendChild(onePageCanvas); } pdf.save(config.fileName); $(orig).width(widthOrig); } }); }; })(jQuery); function createPDF() { $('#renderPDF').createPdf({ 'fileName' : '<?php echo $usercli['idocl']; ?>' }); }  
    • Por gersonab
      Boa tarde a todos.
      tenho pesquisado e ainda não encontrei uma forma de montar uma imagem online, tipo, tenho uma área de 400px por 400px , nesta gostaria de acrescentar algumas imagens que já tenho, tipo clicar e arrastar para dentro, sendo que estas imagens já se encontram online no site, seria mais ou menos assim : poderia colocar dentro desta área uma imagem do gato , do cachorro e ou outra. Não sei qual biblioteca ou forma de fazer.
      gostaria da ajuda para iniciar, desde já agradeço.
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.