0

Tengo mi siguiente formulario de Login,estoy trabajando con php,mysql,bootstrap

	<!--CREACION DEL LOGIN-->
	<div class="container">
    <div class="row" id="pwd-container">
        <div class="col-md-4"></div>
    
          <div class="col-md-4">
            <section class="login-form">
              <form method="post" action="validarLogin.php" role="login">
                  <img src="userLogin.ico" alt="img" img-responsive" alt="" />
                   
                   <input type="email" name="email" placeholder="Email" required class="form-control input-lg"/>
                   <input type="password" name="password" placeholder="Contraseña" class="form-control input-lg" id="password"  required="" />
                   
                   <button type="submit" name="go" class="btn btn-lg btn-primary btn-block">Accesar</button>
                  <div>
                    <a href="#">Create account</a> or <a href="#">reset password</a>
                  </div>
              </form>
            </section>  
          </div>          
    </div>
  </div>

y mi archivo validarLogin.php

<?php
$usuario=$_POST['email'];
$contraseña=$_POST['password'];

//conectar a la BD
$conexion=mysqli_connect("localhost","root","administrador","laboratoriodental");
$consulta="SELECT * FROM login WHERE usuario='$usuario' and contraseña='$contraseña'";
$resultado=mysqli_query($conexion, $consulta);

$filas=mysqli_num_rows($resultado);
if($filas>0){
	header("location:Menu.html");
}

else {?>

  		<div class="alert alert-warning">
      		<strong>Error al guardar los datos</strong> 
      		<a href="Login.html" class="alert-link">Volver</a>
      	</div>  <? } 
mysqli_free_result($resultado);
mysqli_close($conexion);

ya me hace la validación, si corresponde a un nombre que ya tengo en mi BD me manda a otra pagina, y si no, me sale un error, el cual aparece en otra pagina introducir la descripción de la imagen aquí

y yo quiero que salga en la misma pagina donde esta mi Login,como le puedo hacer? no se usar ajax

2 respuestas 2

1

En vez de ejecutar el evento submit, tu botón de enviar debe gatillar un evento en jQuery que a su vez haga un llamado en ajax a tu "validarLogin.php". En vez de tener:

<button type="submit" name="go" class="btn btn-lg btn-primary btn-block">Accesar</button>

Usar, por ejemplo

<button type="button" id="go" class="btn btn-lg btn-primary btn-block">Accesar</button>

En combinación con

jQuery('#go').on('click',function() {
    jQuery.ajax({
       url:'validarLogin.php',
       type:'POST',
       data: jQuery('#pwd-container form').serialize()
    }).then(function(response) { 
       console.log(response);
    });
});

La idea es que a partir de la respuesta obtenida le muestres al usuario si acaso el login falló (luego, se queda donde mismo) o si tuvo éxito (luego se le despliega un mensaje de éxito y se le redirige a menu.html algunos segundos después).

El backend debiera cambiarse para sólo responder con un json diciendo si el login tuvo éxito o no, y quitarle la lógica de manipular la ubicación del usuario.

4
  • 1
    Lo mismo se obtiene mediante $('form').on('submit', function (e) { e.preventDefault(); ... });.
    – gugadev
    el 25 feb. 2017 a las 22:51
  • y ese codigo de jqueruy, lo pongo en otro archivo? que extension es?
    – Root93
    el 25 feb. 2017 a las 22:52
  • lo pones entre <script> y </script>, no me digas que no tienes más código js en todo el sitio
    – ffflabs
    el 25 feb. 2017 a las 23:07
  • meto el código en el mismo archivo del Login, entre las etiquetas<script> y </script>, y cambie el tipo del boton,pero al hacer click no me hace nada, le tengo que agregar una linreria o algo?
    – Root93
    el 26 feb. 2017 a las 0:25
1

Para hacer eso necesitas entender como funciona el $.ajax, te lo intentare explicar brevemente con un ejemplo y te dejo la documentación también aquí: http://api.jquery.com/jquery.ajax/


Ahorita tu formulario ya esta trabajando de la forma tradicional, lo que tienes que hacer es cambiar tu pagina a que utilice jQuery. Recuerda que tienes que agregar la librería a tu pagina, aquí el ejemplo de un formulario que manda datos al back con ajax:

  <!DOCTYPE html> 
  <html>
   <head>
    <title>Send data to back</title>
</head>
<body>
    <div class="container">
        <h2>Send data to back example:</h2>
        <hr>
        <form id="myForm">
            <div>
                <label>Nombre: </label>
                <input type="text" id="user-name" name="userName" required/>
            </div>
            <div>
                <label>Email: </label>
                <input type="email" id="user-email" name="userEmail" required/>
            </div>
            <button id="send-mail" class="btn btn-success"><i class="glyphicon glyphicon-ok"></i> Send</button>
        </form>
    </div>            
</body>

<!-- JS Files at the bottom of the file -->
<!-- import jQuery  -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript"></script>
<script>
    /* global $, _ */

    $('body').ready(function () {

        /*
            Este .on nos va a server para cachar el evento submit, cuando haces click en un boton del tipo "submit" y quiere enviar el formulario, lo hago de esta forma por si tienes un required en un input o algun type="email" de HTML5 se haga la validacion antes de enviar los datos. De igual forma es buena practica hacer una validacion en el back antes de hacer cualquier cosa.
        */
        $('#myForm').on('submit', function () { // Nos suscribimos al evento "submit" de nuestro formulario el cual se lanzara al hacer click en un boton del tipo submit
            var dataToSend = $(this).serialize(); //Aqui ya tenemos el contexto del formulario por eso usamos $(this)

            // Despues hacemos el $.ajax
            $.ajax({
                method: 'POST', // Metodo a utilizar POST, GET, etc...
                url: 'myPage.php', // URL de la pagina que recibira la petición
                data: dataToSend, // Aqui van los datos a enviar, en este caso serializamos los campos del formulario y los asinamos a esta variable por eso solo ponemos esta variable
                success: function (data) {
                    console.log(data); // Este callback que se lanzara si la url 'myPage.php' responde como un status 200: OK, y lo que imprimas en php lo cachara en la variable data.
                },
                error: function (data) {
                    console.log(data); // Este callback que se lanzara si la url 'myPage.php' responde con status de error, e.g. 400, 404, 500, etc...
                }
            });

            return false; // Este return es para que no se lanze el evento submit al navegador y no brinque de pagina, si no que se queda esperando la respuesta de nuestra llamada ajax.
        });

    });
</script>

Y en el backend lo puedes recibir con el name que tiene el input ya que serializamos todos los campos. Con esta explicación creo que ya puedes utilizar el $.ajax en tu pagina si tienes algún error o duda me dices!

Saludos!

Tu Respuesta

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

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