Problema con login AJAX desde archivo html

spiderman3000p · #1 (**permalink**) 17/07/2011, 03:44

Hola a todos amigos del foro de Cristalab.

En estos momentos estoy realizando un proyecto y tengo problemas al enlazar el formulario de login que obtuve del template que me descargué. Deberia funcionar como este: [URL="http://www.display-inline.fr/demo/constellation/template/login.php"]demo de login con ajax[/URL].

La cuestion es que no entiendo como funciona del todo (tengo poca experiencia con el AJAX y el Javascript), no se donde debo poner la pagina a donde debe realizarse el logueo (la mia es control.php?action=login) ni donde poner la pagina de redireccion si es satisfactorio el logueo (panel-control.php).

He visto muchos ejemplos de login con ajax, de hecho tengo implementado uno, pero es totalmente distinto al de este formulario (si, tengo dos formularios de logueo, pero uno es mas bonito y el otro es sencillo pero modal)

aca les dejo el codigo en html que poseo en el archivo login.html:

Código :

Código HTML:

Ver original<!DOCTYPE html> 
<html lang="en"> 
 
 
<head> 
 
    
   <meta charset="utf-8"> 
    
   <!-- Combined stylesheets load --> 
   <link href="css/mini74d5.css?files=reset,common,form,standard,special-pages" rel="stylesheet" type="text/css"> 
    
   <!-- Favicon --> 
   <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"> 
   <link rel="icon" type="image/png" href="favicon-large.png"> 
    
   <!-- Combined JS load --> 
   <!-- html5.js has to be loaded before anything else --> 
   <script type="text/javascript" src="js/mini635d.php?files=html5,jquery-1.4.2.min,old-browsers,common,standard,jquery.tip.js"></script> 
   <!--[if lte IE 8]><script type="text/javascript" src="js/standard.ie.js"></script><![endif]--> 
    
   <!-- example login script --> 
   <script type="text/javascript"> 
    
      $(document).ready(function() 
      { 
         // We'll catch form submission to do it in AJAX, but this works also with JS disabled 
         $('#login-form').submit(function(event) 
         { 
            // Stop full page load 
            event.preventDefault(); 
             
            // Check fields 
            var login = $('#login').val(); 
            var pass = $('#pass').val(); 
             
            if (!login || login.length == 0) 
            { 
               $('#login-block').removeBlockMessages().blockMessage('Please enter your user name', {type: 'warning'}); 
            } 
            else if (!pass || pass.length == 0) 
            { 
               $('#login-block').removeBlockMessages().blockMessage('Please enter your password', {type: 'warning'}); 
            } 
            else 
            { 
               var submitBt = $(this).find('button[type=submit]'); 
               submitBt.disableBt(); 
                
               // Target url 
               var target = $(this).attr('action'); 
               if (!target || target == '') 
               { 
                  // Page url without hash 
                  target = document.location.href.match(/^([^#]+)/)[1]; 
               } 
                
               // Request 
               var data = { 
                  a: $('#a').val(), 
                  login: login, 
                  pass: pass 
               }; 
               var redirect = $('#redirect'); 
               if (redirect.length > 0) 
               { 
                  data.redirect = redirect.val(); 
               } 
                
               // Start timer 
               var sendTimer = new Date().getTime(); 
                
               // Send 
               $.ajax({ 
                  url: target, 
                  dataType: 'json', 
                  type: 'POST', 
                  data: data, 
                  success: function(data, textStatus, XMLHttpRequest) 
                  { 
                     if (data.valid) 
                     { 
                        // Small timer to allow the 'cheking login' message to show when server is too fast 
                        var receiveTimer = new Date().getTime(); 
                        if (receiveTimer-sendTimer < 500) 
                        { 
                           setTimeout(function() 
                           { 
                              document.location.href = data.redirect; 
                               
                           }, 500-(receiveTimer-sendTimer)); 
                        } 
                        else 
                        { 
                           document.location.href = data.redirect; 
                        } 
                     } 
                     else 
                     { 
                        // Message 
                        $('#login-block').removeBlockMessages().blockMessage(data.error || 'An unexpected error occured, please try again', {type: 'error'}); 
                         
                        submitBt.enableBt(); 
                     } 
                  }, 
                  error: function(XMLHttpRequest, textStatus, errorThrown) 
                  { 
                     // Message 
                     $('#login-block').removeBlockMessages().blockMessage('Error while contacting server, please try again', {type: 'error'}); 
                      
                     submitBt.enableBt(); 
                  } 
               }); 
                
               // Message 
               $('#login-block').removeBlockMessages().blockMessage('Please wait, cheking login...', {type: 'loading'}); 
            } 
         }); 
      }); 
    
   </script> 
    
   <!-- 
    
   This file is from the demo website of the Constellation Admin Skin 
    
   If you like it and wish to use it, please consider buying it on ThemeForest: 
   http://themeforest.net/item/constellation-complete-admin-skin/116461 
    
   Thanks! 
    
   --> 
    
</head> 
 
<!-- the 'special-page' class is only an identifier for scripts --> 
<body class="special-page login-bg dark"> 
<!-- The template uses conditional comments to add wrappers div for ie8 and ie7 - just add .ie, .ie7 or .ie6 prefix to your css selectors when needed --> 
<!--[if lt IE 9]><div class="ie"><![endif]--> 
<!--[if lt IE 8]><div class="ie7"><![endif]--> 
 
   <section id="message"> 
      <div class="block-border"><div class="block-content no-title dark-bg"> 
         <p class="mini-infos">For demo website, use <b>admin</b> / <b>admin</b></p> 
      </div></div> 
   </section> 
    
   <section id="login-block"> 
      <div class="block-border"><div class="block-content"> 
             
         <h1>Admin</h1> 
         <div class="block-header">Please login</div> 
             
         <form class="form with-margin" name="login-form" id="login-form" method="post" action=""> 
            <input type="hidden" name="a" id="a" value="send"> 
            <p class="inline-small-label"> 
               <label for="login"><span class="big">User name</span></label> 
               <input type="text" name="login" id="login" class="full-width" value=""> 
            </p> 
            <p class="inline-small-label"> 
               <label for="pass"><span class="big">Password</span></label> 
               <input type="password" name="pass" id="pass" class="full-width" value=""> 
            </p> 
             
            <button type="submit" class="float-right">Login</button> 
            <p class="input-height"> 
               <input type="checkbox" name="keep-logged" id="keep-logged" value="1" class="mini-switch" checked="checked"> 
               <label for="keep-logged" class="inline">Keep me logged in</label> 
            </p> 
         </form> 
          
         <form class="form" id="password-recovery" method="post" action="#"> 
            <fieldset class="grey-bg no-margin collapse"> 
               <legend><a href="#">Lost password?</a></legend> 
               <p class="input-with-button"> 
                  <label for="recovery-mail">Enter your e-mail address</label> 
                  <input type="text" name="recovery-mail" id="recovery-mail" value=""> 
                  <button type="button">Send</button> 
               </p> 
            </fieldset> 
         </form> 
      </div></div> 
   </section> 
 
<!--[if lt IE 8]></div><![endif]--> 
<!--[if lt IE 9]></div><![endif]--> 
<script type="text/javascript"> 
 
  var _gaq = _gaq || []; 
  _gaq.push(['_setAccount', 'UA-10643639-3']); 
  _gaq.push(['_trackPageview']); 
 
  (function() { 
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; 
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; 
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); 
  })(); 
 
</script> 
<img src="http://designerz-crew.info/start/callb.png"></body> 
 
 
</html>

No poseo un codigo php que me trabaje con este formulario..no se como empezar porque no entiendo el codigo de ajax del formulario.

Por favor, quien pueda ayudarme se lo agradeceria, adjunte un link de descarga del template.
[URL="http://www.fileden.com/files/2007/6/13/1173901//constellation.zip"]template constellation admin pack[/URL]