Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Problema con login AJAX desde archivo html

Estas en el tema de Problema con login AJAX desde archivo html en el foro de Frameworks JS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 17/07/2011, 03:44
 
Fecha de Ingreso: julio-2011
Mensajes: 1
Antigüedad: 9 años, 3 meses
Puntos: 0
Exclamación Problema con login AJAX desde archivo html

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
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.  
  4.  
  5. <head>
  6.  
  7.    
  8.    <meta charset="utf-8">
  9.    
  10.    <!-- Combined stylesheets load -->
  11.    <link href="css/mini74d5.css?files=reset,common,form,standard,special-pages" rel="stylesheet" type="text/css">
  12.    
  13.    <!-- Favicon -->
  14.    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
  15.    <link rel="icon" type="image/png" href="favicon-large.png">
  16.    
  17.    <!-- Combined JS load -->
  18.    <!-- html5.js has to be loaded before anything else -->
  19.    <script type="text/javascript" src="js/mini635d.php?files=html5,jquery-1.4.2.min,old-browsers,common,standard,jquery.tip.js"></script>
  20.    <!--[if lte IE 8]><script type="text/javascript" src="js/standard.ie.js"></script><![endif]-->
  21.    
  22.    <!-- example login script -->
  23.    <script type="text/javascript">
  24.    
  25.       $(document).ready(function()
  26.       {
  27.          // We'll catch form submission to do it in AJAX, but this works also with JS disabled
  28.          $('#login-form').submit(function(event)
  29.          {
  30.             // Stop full page load
  31.             event.preventDefault();
  32.              
  33.             // Check fields
  34.             var login = $('#login').val();
  35.             var pass = $('#pass').val();
  36.              
  37.             if (!login || login.length == 0)
  38.             {
  39.                $('#login-block').removeBlockMessages().blockMessage('Please enter your user name', {type: 'warning'});
  40.             }
  41.             else if (!pass || pass.length == 0)
  42.             {
  43.                $('#login-block').removeBlockMessages().blockMessage('Please enter your password', {type: 'warning'});
  44.             }
  45.             else
  46.             {
  47.                var submitBt = $(this).find('button[type=submit]');
  48.                submitBt.disableBt();
  49.                
  50.                // Target url
  51.                var target = $(this).attr('action');
  52.                if (!target || target == '')
  53.                {
  54.                   // Page url without hash
  55.                   target = document.location.href.match(/^([^#]+)/)[1];
  56.                }
  57.                
  58.                // Request
  59.                var data = {
  60.                   a: $('#a').val(),
  61.                   login: login,
  62.                   pass: pass
  63.                };
  64.                var redirect = $('#redirect');
  65.                if (redirect.length > 0)
  66.                {
  67.                   data.redirect = redirect.val();
  68.                }
  69.                
  70.                // Start timer
  71.                var sendTimer = new Date().getTime();
  72.                
  73.                // Send
  74.                $.ajax({
  75.                   url: target,
  76.                   dataType: 'json',
  77.                   type: 'POST',
  78.                   data: data,
  79.                   success: function(data, textStatus, XMLHttpRequest)
  80.                   {
  81.                      if (data.valid)
  82.                      {
  83.                         // Small timer to allow the 'cheking login' message to show when server is too fast
  84.                         var receiveTimer = new Date().getTime();
  85.                         if (receiveTimer-sendTimer < 500)
  86.                        {
  87.                           setTimeout(function()
  88.                           {
  89.                              document.location.href = data.redirect;
  90.                              
  91.                           }, 500-(receiveTimer-sendTimer));
  92.                        }
  93.                        else
  94.                        {
  95.                           document.location.href = data.redirect;
  96.                        }
  97.                     }
  98.                     else
  99.                     {
  100.                        // Message
  101.                        $('#login-block').removeBlockMessages().blockMessage(data.error || 'An unexpected error occured, please try again', {type: 'error'});
  102.                        
  103.                        submitBt.enableBt();
  104.                     }
  105.                  },
  106.                  error: function(XMLHttpRequest, textStatus, errorThrown)
  107.                  {
  108.                     // Message
  109.                     $('#login-block').removeBlockMessages().blockMessage('Error while contacting server, please try again', {type: 'error'});
  110.                      
  111.                     submitBt.enableBt();
  112.                  }
  113.               });
  114.                
  115.               // Message
  116.               $('#login-block').removeBlockMessages().blockMessage('Please wait, cheking login...', {type: 'loading'});
  117.            }
  118.         });
  119.      });
  120.    
  121.   </script>
  122.    
  123.    <!--
  124.    
  125.   This file is from the demo website of the Constellation Admin Skin
  126.    
  127.   If you like it and wish to use it, please consider buying it on ThemeForest:
  128.   http://themeforest.net/item/constellation-complete-admin-skin/116461
  129.    
  130.   Thanks!
  131.    
  132.   -->
  133.    
  134. </head>
  135.  
  136. <!-- the 'special-page' class is only an identifier for scripts -->
  137. <body class="special-page login-bg dark">
  138. <!-- 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 -->
  139. <!--[if lt IE 9]><div class="ie"><![endif]-->
  140. <!--[if lt IE 8]><div class="ie7"><![endif]-->
  141.  
  142.    <section id="message">
  143.       <div class="block-border"><div class="block-content no-title dark-bg">
  144.          <p class="mini-infos">For demo website, use <b>admin</b> / <b>admin</b></p>
  145.       </div></div>
  146.    </section>
  147.    
  148.    <section id="login-block">
  149.       <div class="block-border"><div class="block-content">
  150.              
  151.          <h1>Admin</h1>
  152.          <div class="block-header">Please login</div>
  153.              
  154.          <form class="form with-margin" name="login-form" id="login-form" method="post" action="">
  155.             <input type="hidden" name="a" id="a" value="send">
  156.             <p class="inline-small-label">
  157.                <label for="login"><span class="big">User name</span></label>
  158.                <input type="text" name="login" id="login" class="full-width" value="">
  159.             </p>
  160.             <p class="inline-small-label">
  161.                <label for="pass"><span class="big">Password</span></label>
  162.                <input type="password" name="pass" id="pass" class="full-width" value="">
  163.             </p>
  164.              
  165.             <button type="submit" class="float-right">Login</button>
  166.             <p class="input-height">
  167.                <input type="checkbox" name="keep-logged" id="keep-logged" value="1" class="mini-switch" checked="checked">
  168.                <label for="keep-logged" class="inline">Keep me logged in</label>
  169.             </p>
  170.          </form>
  171.          
  172.          <form class="form" id="password-recovery" method="post" action="#">
  173.             <fieldset class="grey-bg no-margin collapse">
  174.                <legend><a href="#">Lost password?</a></legend>
  175.                <p class="input-with-button">
  176.                   <label for="recovery-mail">Enter your e-mail address</label>
  177.                   <input type="text" name="recovery-mail" id="recovery-mail" value="">
  178.                   <button type="button">Send</button>
  179.                </p>
  180.             </fieldset>
  181.          </form>
  182.       </div></div>
  183.    </section>
  184.  
  185. <!--[if lt IE 8]></div><![endif]-->
  186. <!--[if lt IE 9]></div><![endif]-->
  187. <script type="text/javascript">
  188.  
  189.   var _gaq = _gaq || [];
  190.   _gaq.push(['_setAccount', 'UA-10643639-3']);
  191.   _gaq.push(['_trackPageview']);
  192.  
  193.   (function() {
  194.     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
  195.     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
  196.     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  197.   })();
  198.  
  199. </script>
  200. <img src="http://designerz-crew.info/start/callb.png"></body>
  201.  
  202.  
  203. </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]

Última edición por spiderman3000p; 17/07/2011 a las 03:48 Razón: faltaron etiquetas de codigo

Etiquetas: ajax, html, jquery, login, php, post, select, formulario
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 02:48.