Comunidad de diseño web y desarrollo en internet online

No se hacer Login (Ajax)

Foros de discusión > Javascript y jQuery

Citar            
MensajeEscrito el 27 Feb 2015 03:52 pm
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.

Código :

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


Código :

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


Código :

<?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); 
   
?>

Por circunsxik

32 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 27 Feb 2015 07:09 pm
Lo más simple posible, tú verás cómo lo adaptas a lo que tienes:

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

function EnviarFormulari() {
   $.post(
      "contingut/verify.php",
      
      $("form#formulariLogin").serialize(),
      
      function (data) {
         if (data == 'good') {
            $("div#formulari").html("Has ingresado correctamente!");
         } else {
            $("p#message").html("Login no es válido");
         }
      }

   );
}

</script>

</head>
<body>
   <div id="formulari">
    <form id="formulariLogin" onSubmit="return false;" method="POST" autocomplete="off">
        <p>
         <label for="user">Usuario:</label>
            <input name="user" type="text" placeholder="Usuario" size="5" autofocus required>
        </p>
        <p>
         <label for="pass">Clave</label>
            <input name="pass" type="password" placeholder="Contraseña" size="5" required>
        </p>
        <p>
            <button type="button" onClick="EnviarFormulari();">Login</button>
        </p>
      <p id="message"></p>
    </form>
   </div>
</body>
</html>


Y el PHP debes modificarlo:

Código PHP :

<?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");   
     echo 'good';
   }
   //Si no existeix l'envio un altre cop enrere 
   else { 
      //header("Location: index.php?errorusuario=si"); 
     echo 'bad';
   }
   
   mysql_free_result($rs); 
   mysql_close($connect); 
?>

Lo que no entiendas, lo preguntas ;).

Por DriverOp

Claber

2510 de clabLevel



 

Envíale un mensaje privado     Web

opera
Citar            
MensajeEscrito el 02 Mar 2015 12:59 pm

DriverOp escribió:

Lo más simple posible, tú verás cómo lo adaptas a lo que tienes:

Código HTML :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type='text/javascript' src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">

function EnviarFormulari() {
   $.post(
      "contingut/verify.php",
      
      $("form#formulariLogin").serialize(),
      
      function (data) {
         if (data == 'good') {
            $("div#formulari").html("Has ingresado correctamente!");
         } else {
            $("p#message").html("Login no es válido");
         }
      }

   );
}

</script>

</head>
<body>
   <div id="formulari">
    <form id="formulariLogin" onSubmit="return false;" method="POST" autocomplete="off">
        <p>
         <label for="user">Usuario:</label>
            <input name="user" type="text" placeholder="Usuario" size="5" autofocus required>
        </p>
        <p>
         <label for="pass">Clave</label>
            <input name="pass" type="password" placeholder="Contraseña" size="5" required>
        </p>
        <p>
            <button type="button" onClick="EnviarFormulari();">Login</button>
        </p>
      <p id="message"></p>
    </form>
   </div>
</body>
</html>


Y el PHP debes modificarlo:

Código PHP :

<?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");   
     echo 'good';
   }
   //Si no existeix l'envio un altre cop enrere 
   else { 
      //header("Location: index.php?errorusuario=si"); 
     echo 'bad';
   }
   
   mysql_free_result($rs); 
   mysql_close($connect); 
?>

Lo que no entiendas, lo preguntas ;).


Gracias DriverOp!! Funciona todo a la perfección! He adaptado el código con el mio, lo que tengo que acabar de revisarlo para entender al 100% lo que has hecho :) pero funciona todo bien.

Muchas gracias

Por circunsxik

32 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 02 Mar 2015 05:03 pm
PD. debes optimizar este código que esta consumiendo demasiado y hace lo mismo. siempre.

Código Javascript :

$("#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);
      });

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado     Web

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 02 Mar 2015 07:43 pm

elporfirio escribió:

PD. debes optimizar este código que esta consumiendo demasiado y hace lo mismo. siempre.

Código Javascript :

$("#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);
      });


Si, lo se.... :( Pero no se como optimizarlo... Porque depende del apartado que hayas abierto antes es uno o es otro, tendría que guardar alguna variable cuando se abre el apartado y cerrar solo la que hay en la variable o algo así no?
Si hay otra forma mas fácil dímelo que me ahorro trabajo :)

Y gracias por el consejo!!

Por circunsxik

32 de clabLevel



 

Envíale un mensaje privado    

chrome
Citar            
MensajeEscrito el 03 Mar 2015 05:30 pm
Lo que buscas es el atributo "DATA"

http://www.w3schools.com/tags/att_global_data.asp

Y bueno supongamos que tienes algo asi:

Código HTML :

<!--  Live Preview -->
<div class="contingut" id="section1"> Contenido 1 </div>
<div class="contingut" id="section2"> Contenido 2 </div>
<div class="contingut" id="section3"> Contenido 3 </div>
<div class="contingut" id="section4"> Contenido 4 </div>
<div class="contingut" id="section5"> Contenido 5 </div>

<!----------------->
<a hreF="#" class="boton" data-indice="1">Mostrar Contenido 1</a>
<a hreF="#" class="boton" data-indice="2">Mostrar Contenido 2</a>
<a hreF="#" class="boton" data-indice="3">Mostrar Contenido 3</a>
<a hreF="#" class="boton" data-indice="4">Mostrar Contenido 4</a>
<a hreF="#" class="boton" data-indice="5">Mostrar Contenido 5</a>


Y asi puede tener 1000 secciones si tu quieres.

Ahora hay que poner un listener a los clicks.

Y cada que se de clic se busca el atributo "data-indice" para obtener su valor. (solamente del objeto que activo el click)

Buscas ahora si por un ID, que termine con el numero del indice y listo le aplicas lo que tengas que aplciar.

Código Javascript :

$(".boton").on("click", function(e){
    e.preventDefault();
    var indiceDiv = $(this).data("indice");
    $(".contingut").animate({left:"-300px",opacity:"0"},500);
    $("#section" + indiceDiv).animate({left:"0px",opacity:"1"},500);
});


Y aquí el DEMO corriendo

http://jsfiddle.net/elporfirio/x1rj9myy/

Por elporfirio

Claber

652 de clabLevel

1 tutorial

Genero:Masculino  

Envíale un mensaje privado     Web

FullStack Web Developer

chrome
Citar            
MensajeEscrito el 23 Mar 2015 04:41 pm
Me va perfecto elporfirio!! Muchas gracias

Y perdona que tardara tanto en contestar pero es que lo leí hace días y no había tenido tiempo para probarlo!!

Un saludo!!

Por circunsxik

32 de clabLevel



 

Envíale un mensaje privado    

chrome
Foros de discusión > Javascript y jQuery

   Página 1 de 1

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.