1

estoy aprendiendo javascrit utilizando la libreria jquery, y no he podido resolver el siguiente problema, el cual consiste en un login que pide el usuario y constrasena, y si concuerdan con el usuario que esta definido en un archivo php me deberia mostrar el mensaje de que el usuario es correcto. Sin embargo, eso no pasa. Siempre me dice que es incorrecto:

<script>

$(document).ready(function() {


    //NOTA: el comportamiento default de submit, es que recargue la pagina despues de enviar los datos
    $("#login").submit(function(){

        var user = $("#usuario").val();

        var pass = $("#contra").val();

        alert(user+" "+pass);

        //literal: paquete a enviar al servidor
        var datosFormulario = {usuario:user, contra: pass}

        //enviamos el paquete al servidor, y la respuesta se la mandamos a la funcion procesar datos
        $.get("login.php", datosFormulario, procesarDatos());

        return false;//desabilito el comportamiento default

    }); 

    function procesarDatos(datos_devueltos){
        alert(datos_devueltos)
        if(datos_devueltos=="autorizado"){

            $("#contenidos_externos").html("<p> Usuario correcto. Bienvenido </p>");

        }else{

            $("#contenidos_externos").html("<p> Usuario incorrecto. Intenta de nuevo </p>")

        }

    }

}); 
</script>

archivo php:

$contra_entrar="1234";
$usu_entrar="Juan";

$el_usuario=isset($_GET['usuario']) ? $_GET['usuario'] : $_POST['usuario'];
$la_contra=isset($_GET['contra']) ? $_GET['contra'] : $_POST['contra'];

if ($el_usuario==$usu_entrar && $la_contra==$contra_entrar) {
  echo 'autorizado';
} else {
  echo 'fallo';
}

en el alert de la funcion procesar datos, simpre me dice que el objeto esta indefinido, pero por mas que le he dado vueltas no hayo la solucion

PD: tambien soy nuevo en stackoverflow.

Formulario:

<div class="contenido">
    <div class="principal">
        <form method="get" action="login.php" id="login">
        <table>
            <tr>
                <td>                    
                    <label for="usuario">Usuario:</label>
                </td>
                <td>
                    <input type="text" name="usuario" id="usuario">
                </td>
                </tr>
                <tr>
                <td>
                    <label for="contra">Contaseña: </label>
                 </td>
                 <td>
                    <input type="text" name="contra" id="contra">
                </td>
                </tr>
                <tr>
                <td colspan="2" align="center">
                    <input type="submit" name="boton" id="boton" value="Enviar" >
                </td>
                </tr>
                </table>
            </form>
        <div id="contenidos_externos"></div>
    </div>
</div>
16
  • el alert(user+" "+pass); te muestra los datos cuando los ingresas en los inputs?
    – varTob
    Commented el 4 ago. 2018 a las 3:00
  • Si, si muestra los datos, ingreso Juan como usuario y 1234 como contrasena para que concuerde con los datos del archivo php, pero por algun motivo me muestra un undefine en el alert de la funcion procesar datos Commented el 4 ago. 2018 a las 3:20
  • disculpa que insista, pero en el tercer parametro debes pasar el nombre de la funcion como referencia sin los () .. ya que jquery se encargara de llamar dicha funcion pasandole los parametros.. aca te dejo 1 link para que veas que la solucion propuesta funciona.. 7be0989a.ngrok.io el link estara disponible por 1 por de horas.
    – varTob
    Commented el 4 ago. 2018 a las 3:26
  • tienes el codigo de tu formulario??
    – varTob
    Commented el 4 ago. 2018 a las 3:29
  • el archivo del formulario, el del js y login.php los tienes dentro del mismo directorio?
    – varTob
    Commented el 4 ago. 2018 a las 3:31

3 respuestas 3

0

Prueba eliminando los () cuando llamas a procesarDatos dentro del $.get

$.get("login.php", datosFormulario, procesarDatos);
4
  • Si lo hago no entra a la funcion, con los parentesis si entra. Lo se porque con los () me muestra el alert que dice "undefine" y si los quito no muestra nada, osea no entra Commented el 4 ago. 2018 a las 2:52
  • borraste la caché del navegador despues de hacer la modificación? hice una copia local y si me funciona
    – varTob
    Commented el 4 ago. 2018 a las 2:55
  • Lo abri con el navegador Edge, el cual nunca uso para hacer las pruebas (uso firefox) y me muestra lo mismo, undefine Commented el 4 ago. 2018 a las 3:23
  • Toma como práctica agregar un dato extra a los datos a pasar, en cualquier solicitud, formado por una clave (sin sentido para el proceso) como "rompercache" y cuyo valor sea una cadena aleatoria, de modo que el navegador crea estar pasando un valor diferente todas las veces. Eso te ahorrará muchos dolores de cabeza y pruebas en las que no se percibe el efecto de los cambios en el código.
    – quevedo
    Commented el 4 ago. 2018 a las 3:47
0

El código JS debe quedar de la siguiente forma:

$.get("login.php", datosFormulario, procesarDatos);

Si llamas a procesarDatos seguido de (), estas pasando el resultado de la función en vez de la referencia a la misma.

La función no es llamada porque estas enviandola para manejador del evento "success" que solo se ejecutará con una respuesta correcta de la solicitud.

https://api.jquery.com/jquery.get/#jQuery-get-url-data-success-dataType

Para ver exactamente lo que ocurre debes abrir la herramienta de desarrollo de tu navegador (Habitualmente pulsado F12) y desde el panel de red (network) para ver el estado y respuesta de tu solicitud con $.get

Aún así, no es nada recomendable enviar mediante una petición GET los credenciales de los usuarios, debes tratar de utilizar siempre el intercambio de datos a través de POST, GET no queda protegido por los certificados SSL ya que envia la información de forma legible en la URL del la petición.

Modifica tu script para emplear el siguiente método.

var datosFormulario = {usuario:'usuario', contra: 'psw123'}
    console.log('Validando credenciales.');
     $.ajax({
    	method: "POST",
    	url: "login.php",
    	data: datosFormulario
     })
     .done(function( srvdata ) {
       	console.log(srvdata);
     })
     .fail(function( jqXHR ) {
     	console.log(jqXHR);
     })
     .always(function() {
     	console.log('Respuesta a credenciales recibida');
     });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Recuerda actualizar tu script php login.php sustituyendo $_GET por $_POST.

Ej

$_POST['usuario']
0

Despues de batallar un poco, di con la solucion. El asunto es que, no se por que, en dreamweaver no funciona, asi de simple. Entonces utilice XAMPP para crear un servidor local y hacer las pruebas con ese programa, y enigmaticamente si funciona. El codigo estaba bien (con la excepcion de los parentesis en la llamada a la funcion procesar_datos), simplemente que en dreamweaver no funciona. No se el motivo, pero queria hacerlo saber. De antemano muchas gracias a los que me trataron de ayudar, se les agradece!!

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.