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>