doubt with the $ .get function of the jquery library

1

I am learning javascrit using the jquery library, and I have not been able to solve the following problem, which consists of a login that the user requests and constrasena, and if they agree with the user that is defined in a php file I should show the message that the user is correct. However, that does not happen. He always tells me it's wrong:

<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>

php file:

$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';
}

in the alert of the function to process data, it always tells me that the object is undefined, but no matter how much I have turned it around, there is no solution

PS: I'm also new to stackoverflow.

Form:

<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>
    
asked by julio segura 04.08.2018 в 01:09
source

3 answers

0

After struggling a bit, I came up with the solution. The issue is that, I do not know why, in dreamweaver it does not work, that simple. Then use XAMPP to create a local server and do the tests with that program, and enigmatically if it works. The code was fine (with the exception of parentheses in the call to the function process_data), simply that in dreamweaver does not work. I do not know why, but I wanted to let you know. Thank you in advance to those who tried to help me, thank you!

    
answered by 05.08.2018 / 05:13
source
0

Try removing the () when you call to processData within $ .get

$.get("login.php", datosFormulario, procesarDatos);
    
answered by 04.08.2018 в 04:39
0

The JS code should look like this:

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

If you call to process Data followed by (), you are passing the result of the function instead of the reference to it.

The function is not called because you are sending it to the "success" event handler, which will only be executed with a correct response of the request.

link

To see exactly what is happening you must open the development tool of your browser (Usually pressed F12) and from the network panel to see the status and response of your request with < strong> $. get

Even so, it is not advisable to send the credentials of the users through a GET request, you should always try to use the data exchange through POST, GET is not protected by the SSL certificates because it sends the information in a way readable in the URL of the request.

Modify your script to use the following method.

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>

Remember to update your php login.php script by substituting $ _GET for $ _POST.

Ex

$_POST['usuario']
    
answered by 04.08.2018 в 18:36