0

Buenas tardes, tengo el siguiente escenario. Este mi login.html

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="estilos/estilos.css"/>
	<meta charset="utf-8">
</head>

<body>

   <div id="popup">
     <div id="formulario">
	<h1 id="header" align="center">Ingresar</h1>	
	<br>
	<hr>					
	<br>					
	<form action="Controlador/login.php" method="post" id="formlogin">
		<table>
   			<tr>
   				<td>Usuario:</td>
   				<td><input type="text" name="usuario" id="usuario"></td>
   			</tr>
   			<tr>
   				<td>Password:</td>
   				<td><input type="password" name="password" id="pass"></td>
   			</tr>
   			<tr>
   				<td>&nbsp;</td>
   				<td><input id="botonl" type="submit"></td>
   			</tr>
   			<tr>
   		            <td colspan="2" align="right"><a id="botonRegistrarse">¡Registrate!</a></td>
   			</tr>
   			</table>
   		</form>
   	</div>
   </div>
   <script src="js/jquery-3.2.1.min.js"></script> <!--Utilizar libreria JQUERY-->
   <script src="js/codigo.js"></script> <!--TODO lo que utilize JQUERY deberá ser referenciado 										despues de la libreria.-->
</body>
</html>

Este manda las variables usuario y password a Controlador/login.php que es donde, enviadas las 2 variables se procesan para comprobar el ingreso exitoso del usuario.

<?php
	require_once('../Modelo/class.conexion.php');
	require_once('../Modelo/class.consultas.php');

	$usuario = $_POST['usuario'];
	$pass = $_POST['password'];

	if(strlen($usuario) > 0 && strlen($pass) > 0){
		$consultas = new Consultas();
		$mensaje = $consultas->verificarUsuario($usuario, $pass);
			if (is_string($mensaje)) {
				echo $mensaje;
			}else{			
				session_start();
				foreach ($mensaje as $resultado) {
 		   			$user = $resultado['nickname'];
 		   			$rango = $resultado['rango'];
				}
 				$_SESSION['usuario'] = $user;
 	     	        	$_SESSION['rango'] = $rango;

 	    		        if ($_SESSION['rango']=='Administrador'){
                                         echo "Administrador";
					//echo "header('Location: ../manga.html');"; 
				}elseif ($_SESSION['rango']=='starter') {
					header("Location: ../login.html");
				}elseif ($_SESSION['rango']=='Viper') {
					header("Location: ../index.html");
				}
			}			
		}else{
		echo "Por favor rellena ambos campos";
	}		
?>

El método verificarUsuario , es el siguiente:

public function verificarUsuario($nombre_usuario,$password_usuario){
	$modelo = new Conexion();
   		$conexion = $modelo->get_conexion();
	$sql = "select nickname, password, idUsuario, rango
			from usuarios
			where nickname = :nombre_usuario 
			and password = :password_usuario";
	$statement = $conexion->prepare($sql);				
	$statement->bindParam(':nombre_usuario', $nombre_usuario);
	$statement->bindParam(':password_usuario', $password_usuario);
	if(!$statement){
		return "Error verifique parametros";
	}else{
		$statement->execute();
		if($statement->rowCount() > 0){							
			return $statement->fetchAll(PDO::FETCH_ASSOC);
		}else{
			return "no hay usuarios con registrados con esos datos";
		}	
	}		
   }

Hasta ahí todo bien, ahora como mi login.html tiene esa referencia a mi archivo JS donde con JQuery y Ajax intento hacer que dependiendo del rango de usuario logueado lo mande a una pagina u otra.

Teniendo el siguiente fragmento de código JS

$('#botonl').click(function(event) {
		event.preventDefault();
		usuario = $('#usuario').val();
		password = $('#pass').val();

		$.ajax({
			url: 'Controlador/login.php',
			type: 'POST',
			data: {usuario, password},
			beforeSend:function(){
				console.log("Se esta procesando tu peticion");
			}
		})
		.done(function(data) {
			console.log("success");
                         alert(data);
		 if (data == 'Administrador') {
		 	document.location.href = "manga.html";
		 	alert(data);
		 }
		 else{
		 	alert("ERROR POR QUE TE ODIO");
		 }
		 }
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		});
	});	

El código no funciona correctamente, por ejemplo, si ingreso como un usuario Administrador, me manda el alert con el mensaje "Administrador" mas sin embargo en el if entra al else y me manda el alert "ERROR PORQUE TE ODIO", por lo tanto no me redirige hacia donde se tiene establecido, y con los otros casos, en el alert me trae todo el código html de dichas páginas.

Cualquier ayuda u observación será bien recibida, muchas gracias.

7
  • Estaba escribiendo una respuesta, pero veo cosas muy raras en login.php. ¿Usas ese archivo para otras cosas o es un simple verificador para llamar desde jQuery/Ajax en este caso? Pregunto porque viéndolo de cerca parece que lo usas también para que los usuarios se logueen y quieres usarlo también para esta petición-verificación vía Ajx. Para la petición Ajax es recomendable usar un archivo php que sólo sea usado para eso.
    – A. Cedano
    Commented el 9 sept. 2017 a las 0:00
  • ¿Qué ves de raro?, Pues desde el html envió las 2 variables que recibe login.php este las procesa para verificar el acceso. Commented el 9 sept. 2017 a las 0:06
  • Una de las cosas que veo raras es esta: session_start(); foreach ($mensaje as $resultado) { $user = $resultado['nickname']; $rango = $resultado['rango']; } $_SESSION['usuario'] = $user; $_SESSION['rango'] = $rango; no entiendo por qué usas $_SESSION ahí...
    – A. Cedano
    Commented el 9 sept. 2017 a las 0:28
  • Ah okey, pues es que como ahí mismo se loguea el usuario, utilizo sesiones para que si recargas la página, ya este el usuario logueado sin necesidad de volver a loguearse, y el foreach, es para recorrer el arreglo que me regresa el metodo verificarUsuario Commented el 9 sept. 2017 a las 0:43
  • No es correcto entonces usar login.php para enviar tu petición Ajax en este caso. Tienes que crear un archivo php dedicado específicamente para hacer las verificaciones que necesitas desde tu código jQuery.
    – A. Cedano
    Commented el 9 sept. 2017 a las 0:45

2 respuestas 2

1

Vale tendrías que hacer la prueba pero creo que solo esta mal tu $.ajax al enviar tu data porque este debería de enviar un objeto json y tu no estas haciendo eso:

Entonces lo que esta mal es:

data: {var1, var2},

Este debería ser

data: {var1:var1, var2:var2},

Esto solo porque tu obtienes los datos en login.php de esta forma:

$usuario = $_POST['var1'];
$pass = $_POST['var2'];

Lo conveniente es tener todo en orden y con su nombre como debería de ser, para que otros desarrolladores puedan entender tu código.

Podrias cambiar el data de tu ajax por:

data: {usuario:var1, password:var2},

Y Obtenerlos en login.php asi:

$usuario = $_POST['usuario'];
$pass = $_POST['password'];

Espero que esto resuelva tu problema.

1
  • Gracias por tu respuesta, antes de postear la pregunta tuve en cuenta eso que me comentas, mas sin embargo el error persiste, cuando hago la petición ajax esta si me regresa en el alert el rango del usuario que ingreso, pero luego en el if en mi codigo javascript entra en el else y me despliega el mensaje de ERROR PORQUE TE ODIO Commented el 9 sept. 2017 a las 18:36
0

Por si a alguien le sirve puede tomar esto como apoyo.

Mi codigo HTML.

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<link rel="stylesheet" href="estilos/estilos.css"/>
	<meta charset="utf-8">
</head>

<body>
<div id="popup">
		<div id="formulario">
			<h1 id="header" align="center">Ingresar</h1>	
			<br>
			<hr>					
			<br>					
			<form action="Controlador/login.php" method="POST" id="formLogin">
				<table>
				<tr>
					<td>Usuario:</td>
					<td><input type="text" name="usuario" id="usuario"></td>
				</tr>
				<tr>
					<td>Password:</td>
					<td><input type="password" name="password" id="pass"></td>
				</tr>
				<tr>
					<td>&nbsp;</td>
					<td><input id="botonIngresar" type="submit"></td>
				</tr>
				<tr>
					<td colspan="2" align="right"><a id="linkRegistrarse">¡Registrate!</a></td>
				</tr>
				</table>
			</form>
		</div>
	</div>
	<script src="js/jquery-3.2.1.min.js"></script> <!--Utilizar libreria JQUERY-->
	<script type="js/jquery.validate.min.js"></script><!--Lo utilizamos para validar campos-->
	<script src="js/codigologin.js"></script> <!--TODO lo que utilize JQUERY deberá ser referenciado 										despues de la libreria.-->
</body>
</html>

El código PHP: Aquí lo que hice mejor, fue que dependiendo de la condición que se cumpliera, esta regresará en la petición AJAX un json_encode generado en este archivo PHP.

<?php
	require_once('../Modelo/class.conexion.php');
	require_once('../Modelo/class.consultas.php');

	$usuario = $_POST['usuario'];
	$pass = $_POST['password'];

	if(strlen($usuario) > 0 && strlen($pass) > 0){
		$consultas = new Consultas();
		$mensaje = $consultas->verificarUsuario($usuario, $pass);
			if (empty($mensaje)) {
				//echo ("No hay usuario registrados con esos datos");
				$error = ['No existen usuarios registrados con esos datos'];

				$arrayJson = json_encode($error);
				print_r($arrayJson);
			}else{			
				foreach ($mensaje as $resultado) {
 		   			$user = $resultado['nickname'];
 		   			$id = $resultado['idUsuario'];
 					$pass = $resultado['password'];
 	  				$rango = $resultado['rango'];
 	  				$estadoCuenta = $resultado['estadoCuenta'];
				}

				if ($estadoCuenta == 'ban') {
					$error = ['Usted no tiene acceso al sistema, contacte a la administración'];

					$arrayJson = json_encode($error, JSON_UNESCAPED_UNICODE);
					print_r($arrayJson);
				}else{
					session_start();

					$_SESSION['idUsuario'] = $id;
 					$_SESSION['usuario'] = $user;
 	     			$_SESSION['password'] = $pass;	
 	     			$_SESSION['rango'] = $rango;

 	     			$arrayJson = json_encode($mensaje);
					print_r($arrayJson);
				}
		}
	}else{
		//echo "Por favor rellena ambos campos";
		$error = ['Por favor rellena ambos campos'];

		$arrayJson = json_encode($error);
		print_r($arrayJson);
	}		
?>

Y este es el código de mi archivo JS

$(document).ready(function() {
	//EFECTUAR INGRESO AL SISTEMA MEDIANTE PETICION AJAX
	$('#botonIngresar').click(function(event) {
		event.preventDefault();
		usuario = $('#usuario').val();
		password = $('#pass').val();
		var rangoUsuario;

		$.ajax({
			url: 'Controlador/login.php',
			type: 'POST',
			dataType: 'JSON',
			data: {usuario, password},
			beforeSend:function(){
				console.log("Se esta procesando tu peticion");
			}
		})
		.done(function(data) {
			console.log("success");
			  $.each(data, function(index, val) {
			  	if (val.estadoCuenta == 'ok') {
			  		if (val.rango == 'Administrador') {
			  			document.location.href = "admin.php"
			  		}else if(val.rango == 'Viper' || val.rango == 'starter'){
			  			document.location.href = "index.php"
			  		}else if(val == 'No existen usuarios registrados con esos datos'){
				  		alert(val);
			  		}else if(val == 'Por favor rellena ambos campos'){
				  		alert(val);
			  		}
			  	}else{
			  		alert(val);
			  	}
			  });
		})
		.fail(function() {
			console.log("error");
		})
		.always(function() {
			console.log("complete");
		},'json');
	});
});

Espero que le sea de utilidad a alguien más. Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.