Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » AJAX » No se como hacer un Login con (Ajax)

AJAX - No se como hacer un Login con (Ajax)

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de Jordi

No se como hacer un Login con (Ajax)

Publicado por Jordi (1 intervención) el 27/02/2015 16:58:22
Hola! Estoy haciendo una pagina web que los diferentes apartados se cargan todos desde un principio y con jquery lo que hago es que los muestre en una capa, así el navegador no tiene que cargar la pagina cada vez.
Pero no se como hacerlo con el login... :(

Quiero que el login, si es correcto se cargue una pagina dentro de la capa y si es incorrecto se cargue otra. Esto lo hace ahora con un .php que lo reenvía con header location, pero creo que con ajax se puede hacer sin cambiar de pagina. Os muestro el código jquery de la pagina principal, el del login y el .php de verificación del login.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
<!-- Libreria jQuery -->
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
 
<script type="text/javascript">
	//Cargarem les diferents pagines php dins dels divs ocults corresponents

	$(document).ready(function(){
		$('.contingut1').load('contingut/empresa.php');
		$('.contingut2').load('contingut/web.php');
		$('.contingut3').load('contingut/servicioTecnico.php');
		$('.contingut4').load('contingut/contacto.php');
		$('.contingut5').load('contingut/whatsApp.php');
		$('.contingut6').load('contingut/login.php');
		$('.contingut7').load('contingut/teamViewer.php');
 
		//Al fer click als botons es fara visible la capa corresponent i s'amagaran les altres

		$("#boton1").click(function () {
			$(".contingut2").animate({left:"-300px",opacity:"0"},500);
			$(".contingut3").animate({left:"-300px",opacity:"0"},500);
			$(".contingut4").animate({left:"-300px",opacity:"0"},500);
			$(".contingut5").animate({left:"-300px",opacity:"0"},500);
			$(".contingut6").animate({left:"-300px",opacity:"0"},500);
			$(".contingut7").animate({left:"-300px",opacity:"0"},500);
 
			$(".contingut1").animate({left:"0px",opacity:"1"},500);
		});
		$("#boton2").click(function () {
			$(".contingut1").animate({left:"-300px",opacity:"0"},500);
			$(".contingut3").animate({left:"-300px",opacity:"0"},500);
			$(".contingut4").animate({left:"-300px",opacity:"0"},500);
			$(".contingut5").animate({left:"-300px",opacity:"0"},500);
			$(".contingut6").animate({left:"-300px",opacity:"0"},500);
			$(".contingut7").animate({left:"-300px",opacity:"0"},500);
 
			$(".contingut2").animate({left:"0px",opacity:"1"},500);
		});
		$("#boton3").click(function () {
			$(".contingut1").animate({left:"-300px",opacity:"0"},500);
			$(".contingut2").animate({left:"-300px",opacity:"0"},500);
			$(".contingut4").animate({left:"-300px",opacity:"0"},500);
			$(".contingut5").animate({left:"-300px",opacity:"0"},500);
			$(".contingut6").animate({left:"-300px",opacity:"0"},500);
			$(".contingut7").animate({left:"-300px",opacity:"0"},500);
 
			$(".contingut3").animate({left:"0px",opacity:"1"},500);
		});
		$("#boton4").click(function () {
			$(".contingut1").animate({left:"-300px",opacity:"0"},500);
			$(".contingut2").animate({left:"-300px",opacity:"0"},500);
			$(".contingut3").animate({left:"-300px",opacity:"0"},500);
			$(".contingut5").animate({left:"-300px",opacity:"0"},500);
			$(".contingut6").animate({left:"-300px",opacity:"0"},500);
			$(".contingut7").animate({left:"-300px",opacity:"0"},500);
 
			$(".contingut4").animate({left:"0px",opacity:"1"},500);
		});
		$("#icon3").click(function () {
			$(".contingut1").animate({left:"-300px",opacity:"0"},500);
			$(".contingut2").animate({left:"-300px",opacity:"0"},500);
			$(".contingut3").animate({left:"-300px",opacity:"0"},500);
			$(".contingut4").animate({left:"-300px",opacity:"0"},500);
			$(".contingut6").animate({left:"-300px",opacity:"0"},500);
			$(".contingut7").animate({left:"-300px",opacity:"0"},500);
 
			$(".contingut5").animate({left:"0px",opacity:"1"},500);
		});
		$("#icon5").click(function () {
			$(".contingut1").animate({left:"-300px",opacity:"0"},500);
			$(".contingut2").animate({left:"-300px",opacity:"0"},500);
			$(".contingut3").animate({left:"-300px",opacity:"0"},500);
			$(".contingut4").animate({left:"-300px",opacity:"0"},500);
			$(".contingut5").animate({left:"-300px",opacity:"0"},500);
			$(".contingut7").animate({left:"-300px",opacity:"0"},500);
 
			$(".contingut6").animate({left:"0px",opacity:"1"},500);
		});
		$("#icon6").click(function () {
			$(".contingut1").animate({left:"-300px",opacity:"0"},500);
			$(".contingut2").animate({left:"-300px",opacity:"0"},500);
			$(".contingut3").animate({left:"-300px",opacity:"0"},500);
			$(".contingut4").animate({left:"-300px",opacity:"0"},500);
			$(".contingut5").animate({left:"-300px",opacity:"0"},500);
			$(".contingut6").animate({left:"-300px",opacity:"0"},500);
 
			$(".contingut7").animate({left:"0px",opacity:"1"},500);
		});
	});
</script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
	<formulariLogin>
    	<table align="center">
        	<td>
                <form action="contingut/verify.php" method="POST" autocomplete="off">
                	<p>
                		<input name="user" type="text" placeholder="Usuario" size="5" autofocus required>
                    </p>
                    <p>
                        <input name="pass" type="password" placeholder="Contraseña" size="5" required>
                    </p>
                    <p>
                    	<input class="botoLogin" type="submit" value="Login">
                    </p>
            	</form>
		</td>
        </table>
    </formulariLogin>
</body>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<?php
 
	$connect = mysql_connect("SERVIDOR","USER","PASS");
		if (!$connect) {
			die('No se ha podido acceder al servidor ' . mysql_error());
		}
 
	$bd = mysql_select_db("BD",$connect);
		if (!$bd) {
			die('Base de datos no encontrada ' . mysql_error());
		}
 
	$ssql = "SELECT * FROM usuaris WHERE user='".$_POST['user']."' AND pass='".$_POST['pass']."'";
 
	$rs = mysql_query($ssql,$connect);
 
 
	//Si usuario y contraseña son correctes

	if (mysql_num_rows($rs)!=0){
 
		//defineixo una sessio y guardo datos 

		session_start();
		$_SESSION["usuariLoguejat"] = "Usuari Loguejat";
		$autentificado = "SI";
		header ("Location: descargas.php");
	}
	//Si no existeix l'envio un altre cop enrere 

	else {
		header("Location: index.php?errorusuario=si");
	}
 
	mysql_free_result($rs);
	mysql_close($connect);
 
?>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas
Val: 47
Ha mantenido su posición en AJAX (en relación al último mes)
Gráfica de AJAX

No se como hacer un Login con (Ajax)

Publicado por Vainas (71 intervenciones) el 02/03/2015 20:40:58
Buenas:

Elimina los header(...) y en su lugar envia algun xml, json y ya lo lees con jquery. Tienes que entender que si el login es correcto estas definiendo una session. Apartir de alli lo que tienes que comprobar en tu php sera siempre que esa session y las variables de la conexion del usuario son lo mas actual que tienes (deja en la session alguna ultima hora de conexion por ejemplo).

Espero que te quede claro, sino pregunta de nuevo y te explico mas.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar