Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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;
} .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.PHPif(!isset($_SESSION['uname'])){
header('Location: index.php');
}// logout
if(isset($_POST['but_logout'])){
session_destroy();
header('Location: index.php');
}
?><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$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));
} 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;
} font-family: "Trebuchet MS", tahoma, arial;
}
#formulario{
width:500px;
margin:40px auto;
text-align:center;
position:relative;
} 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;
} 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;
} 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%;
}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.
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.
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.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.Amanhã testarei com calma e te retorno, estou pelo celular.
ok, desja já fico grato.
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](https://www.php.net/manual/pt_BR/function.json-encode.php) e [ajax](http://api.jquery.com/jquery.ajax/).valeu Marcosmarcolin, eu fiz outro modelo que funcionou, esse não funcionou.
Ricardo, você pode postar o dump do banco de dados para eu reproduzir seu código em um container aqui localhost e emular o teste ?
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 */;
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.