1

<?php 

include_once 'header.php'
?>





<script> 
	function submitForm(){
		var nick = $("input#nick").val();
		var pwd = $("input#pwd").val();

		var data = {nick: 'nick', password: 'pwd'}

		$.ajax ({
			type: 'POST',
			url: 'logearse.php',
			data: data,
			success: function () { alert:("bien hecho"); }


		});

	}

</script>







		<div id="error"></div>

		<div class="main-wrapper"> 		
		



			<form id="login-form" class="signup-form" action="logearse.php" method="POST"> 

			<h2>Iniciar sesion</h2>
			
				<input id="nick" type="text" name="nick" placeholder="nick" required> </input>


				<input id="pwd" type="password" name="pwd" placeholder="Password" required> </input>


			<button id="login-button" type="submit" name="submit" value="iniciarsesion"> Iniciar sesion </button>
			

			</form>
<?php 

include_once'footer.php';
?>


simplemente luego de iniciar sesión, me redirige al header y ya esta, no lo muestra ni me dice por que, originalmente tenia pensado ejecutar otra cosa luego del success pero al ver que no funcionó decidí bajarlo a la mínima expresión posible, pero ni así, no puedo mostrar un sencillo mensaje de alerta.

voy a dejar el codigo de 'logearse.php' por si juega algún rol aquí.

<?php

 session_start();


include_once 'conexion.php';


		$pwd= mysqli_real_escape_string($conn, $_POST ['pwd']);
		$nick= mysqli_real_escape_string($conn, $_POST ['nick']);


$sql = "SELECT * FROM Usuario WHERE nick = '$nick' AND password = '$pwd'";  
$result = mysqli_query ($conn, $sql);


		if ( empty($pwd) || empty($nick) )

			{
				header("Location: index.php?login=empty"); 
				exit();
			}


			else


		{

if (!$row = mysqli_fetch_assoc($result))  

	/*Creamos una variable llamada row, que sera igual al resultado de la base de datos si es
	que realmente recibimos un resultado de mi statement $sql (osea si realmente el e-mail y pwd
	introducidos, hace match con la columna en horizontal(<--->) de mi tabla. Pero ahora el signo de exclamación
	me dice que si lo de arriba, NO PASO. Osea, si no tenemos resultado de la base de datos y el nick y pwd
	no hace match, entonces hara...Lo que sea que ponga en el codigo.*/	
		{
		header ("Location: index.php?userorpwdincorrect");
		}
	
	else /* Esto se ejecutara si la busqueda hace match*/

	{

	$_SESSION ['id'] = $row['id'];
	$_SESSION ['nick'] = $row['nick']; 


	$id_sesion = $_SESSION ['id'];
	$nick_sesion = $_SESSION ['nick']; 
	
	
	header ("Location: index.php?login=success");
	}


		}

EDIT: Solucionado, gracias.

introducir la descripción de la imagen aquí

2
  • 1
    Hola quitale los dos puntos al alert alert("bien hecho"); el 17 ago. 2018 a las 16:05
  • Hola Stalin, lo hice, pero sigue sin funcionar.
    – Hoozuki
    el 17 ago. 2018 a las 16:27

2 respuestas 2

2

Te falta ligar la función de JS al formulario.

<form id="login-form" class="signup-form" action="logearse.php" method="POST" onsubmit="submitForm()">

Aquí hay un par de cosas que tienes que valorar, o envias la información por FORM o la envías por AJAX Así como lo estas haciendo estas combinando los dos y nunca tendrás el resultado que quieres

Si es por FORM, entonces no tiene nada que ver aquí AJAX, no invoques la función, Así el PHP te regresará correctamente los encabezados de redireccion con sus respectivas variables.

Vamos a resolverlo primero por FORM, te falta agregar unas instrucciones en PHP para que se vean los errores. Lo colocaré en el div del error

<div id="error">
<?php
 if( !empty($_GET['error']) ){
  echo 'Hubo un error: <b>' . $_GET['error'] . '</b>';
 }
 if( !empty($_GET['login']) ){
  echo 'Te logueaste correctamente: <b>' . $_GET['login'] . '</b>';
 }
?>

</div>

Ahora para que funcione debemos modificar un poco los encabezados que regresas en PHP, estos dos para ser específicos:

header ("Location: index.php?error=userorpwdincorrect");
header ("Location: index.php?error=empty"); 
header ("Location: index.php?login=success"); 

Esto que hace, cuando al navegador le regresas un error, el PHP de tu login.php y las instrucciones de estan dentro del DIV del error, validan si hay una variable en la URL que se llame error, si existe entonces la renderizamos. Lo mismo hice cuando la conexión es exitosa, eso en cuanto a la técnica es todo, recuerda borrar tu JS pues con esta técnica ya no te servirá. (Por el momento, puedes hacer cosas geniales, pero te falta cayo)

Revisemos que estas haciendo ahora con AJAX. Como recomendación (Y por mismas siglas de AJAX) se recomienda usar JSON o XML como tipo de respuesta, no le puedes regresar un header a AJAX por que no espera un encabezado, vamos a corregirlo.

En primera, hay que cortar la funcionalidad nativa del botón al momento de enviar.

<script>
//Cuando esté listo el DOM
$(function(){
  //Detectar cuando se da click al botón de login
  $(document).on('click','#login-button',function(e){
    //Cortar funcionalidad
    e.preventDefault();

    //Declaramos el objeto que enviaremos por AJAX
    //y le ponemos sus valores, recuerda que JSON trabaja bajo clave->valor
    var obj = {
      'nick': $('#nick').val().trim(),
      'pwd':  $('#pwd').val().trim(),
    };

    //Ahora si invocamos a AJAX
    $.ajax({
      url:'loguearse.php',
      method:'POST',
      data: obj,
      success:function( respuesta ){
          //Vemos que trae el nodo de respuesta
          alert( respuesta.mensaje );
      },
      error: function( e, err, error ){
          //Añadimos un nodo de error, por si pasa algo en el servidor, esto lo vamos a ver en la consola de depuración
         console.log(e, err, error);
      }
    })
  });
})
</script>

Ahora, vamos a cambiar las respuestas de tu archivo loguearse.php Tienes errores en la lógica de la estructura, así que la enderezaré un poco, te dejo comentarios:

<?php
session_start();
include_once 'conexion.php';
//Declaramos un arreglo que será nuestro retorno
$respuesta = array();

//Primero hay que validar que las variables existan
//La superglobal $_REQUEST responde a los verbos GET y POST
if( empty( $_REQUEST['pwd'] ) || empty( $_REQUEST['nick'] ) ){
  $respuesta['mensaje'] = 'Usuario y/o password vacío';
}


else{
  //Guardamos y limpiamos las variables
  $pwd= mysqli_real_escape_string($conn, $_REQUEST ['pwd']);
  $nick= mysqli_real_escape_string($conn, $_REQUEST ['nick']);

  //Creamos el SQL, no siempre funciona agregando así las variables, yo recomiendo concatenar
  $sql = "SELECT * FROM Usuario WHERE nick = '". $nick. "' AND password = '".$pwd ."'"; 

  //Validamos que la consulta esté bien hecha
  if( !$result = mysqli_query ($conn, $sql) ){
    $respuesta['mensaje'] = 'Tronó la consulta';
  }

  else{
      //Aquí asignamos nuestro arreglo, assoc o array te sirven
      $row = mysqli_fetch_array( $result );

      //creas tus variables de sesión
      $_SESSION['id'] = $row['id'];
      $_SESSION['nick'] = $row['nick'];
      $respuesta['mensaje'] = 'Se crearon las variables de sesión, conexión exitosa';

      //Recuerda que por limpieza del servidor, borramos la información de la query y cerramos conexión
      mysqli_free_result($result);
      mysqli_close( $conn );
  }

}

//Ahora si, retornamos nuestra respuesta con formato y encabezado JSON
header('Content-Type: application/json');
echo json_encode($respuesta);
?>

Así se comporta un AJAX, quizá haya un par de errores, no tengo ambiente para testear, pero no va a ser un problema para ti.

Ya por último y como recomendación, tienes graves aujeros de seguridad en las contraseñas, hechale un ojo a Password Hash para que veas como lo solucionas.

Anexo aclaración de arreglos asociativos en PHP y objetos en Javascript

Un arreglo asociativo también se conoce como arreglo bidimensional o multidimensional, ejemplifico

Este sería un arreglo común y corriente en PHP

$arreglo = array('Moto','Carro','Bicicleta');

Si ciclas el arreglo te saldrá cada uno de los elementos del arreglo

foreach( $arreglo as $vehiculo ){
  echo $vehiculo;
}

¿Pero como añadirías aviones al mismo arreglo? La lógica nos dice

$arreglo = array('Moto','Carro','Bicicleta', 'Avión', 'Cohete', 'Hércules');

¿Cómo sabes cual es cual? No sabes (Bueno si, tienes que meter un complejo de expresiones regulares pero no es el caso) Entonces partimos hacemos un arreglo asociativo con dos dimensiones, vehiculos y aviones, te quedaría así.

$arreglo = array();
$arreglo['vehiculos'] = array('Moto','Carro','Bicicleta');
$arreglo['aviones'] = array('Avión','Cohete','Hércules');

Ahora ya puedes identificar por que cada uno pertenece a un 'nodo'

foreach( $arreglo['vehiculos'] as $vehiculo){
  echo $vehiculo;
}

foreach( $arreglo['aviones'] as $avion){
  echo $avion;
}

Cuando regresa al Javascript con el encabezado y formato JSON, Javascript los interpreta de la misma forma

success:function( respuesta ){
  respuesta.vehiculos.forEach( function( vehiculo ){
   console.log( vehiculo );
  })

  respuesta.aviones.forEach( function( avion ){
   console.log( avion );
  })
  //también puede ser respuesta['aviones'] y respuesta['vehiculos']
}

Y es así como PHP y Javascript mantienen una sinergia hablando los dos el mismo "lenguaje"

No está de más que te sigas nutriendo en Arreglos asociativos PHP y JSON JSON y XML está muuuy de moda, por ser rápido y liviano, entendiendo esto, podrás entrar al mundo de NodeJS y MongoDB si quieres.

Espero te sirva, saludos

5
  • Seguí las intrucciones usando el metodo de AJAX que es como necesito hacerlo, pero no sucede nada al momento de apretar el boton, por otro lado en la consola me arroja > [Violation] 'readystatechange' handler took 2771ms > id="login-button" type="submit" edite el post con el codigo que use aplicando tu codigo
    – Hoozuki
    el 22 ago. 2018 a las 17:07
  • 1
    Quitale el onsubmit="submitForm()" a formulario y al botón, estás invocando de nuevo la función y no es lo que queremos, además no se si tu backend esté bien construido. Puedes ver lo que hay en la consola en el apartado de Network->Preview? el 22 ago. 2018 a las 17:20
  • Vaya, ya me preguntaba yo por que no me había dado ningún error, con que allí estaban, tuve varios errores en preview en mi backend, lo arregle uno por uno y funcionó, listo todo, edite el post con la captura exitosa. Ahora, sobre el Onsubmit, creí que esa era la forma de ligar el JS al formulario para que funcionara con el script? el form quedo asi '<form id="login-form" class="signup-form" method="POST">' no sabia que atributos necesitaba en el form. Gracias por tu mensaje, muy elaborado y educativo, tengo una duda adicional, pero te la planteo abajo en otro mensaje.
    – Hoozuki
    el 22 ago. 2018 a las 17:55
  • Que exactamente es esto? -> $respuesta['mensaje'] = 'asf'; <- una variable seguida con un corchete que lleva 'mensaje' dentro? No loro entenderlo bien, estamos creando un array? luego he visto que normalmente las funciones son -> functions () <- pero por que la tuya tiene palabras dentro del parentesis? -> functions ( respuesta ) <- y luego en el alert me confunde tambien el ->alert( respuesta.mensaje );<- Son preguntas que no encuentro la manera de articular en palabras para encontrar su respuesta en internet.
    – Hoozuki
    el 22 ago. 2018 a las 18:01
  • 1
    Modifiqué la respuesta y te expliqué como funciona. :) el 22 ago. 2018 a las 18:24
2

Hola debes quitarle esos dos puntos en el alert

alert("bien hecho");

3
  • Lo quite y sigue sin funcionar, ni idea que pueda ser.
    – Hoozuki
    el 17 ago. 2018 a las 16:27
  • debes tener un error en el ajax coloca error: function (err) { console.debug(err) } abajo del success para conocer que error tienes el 17 ago. 2018 a las 16:33
  • lo hago y la consola detecta a esa linea de codigo donde esta, como 'Uncaught SyntaxError: Unexpected identifier', trate colocando una ";" antes de la ultima llave, pero no era eso tampoco.
    – Hoozuki
    el 17 ago. 2018 a las 16:48

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.