Tema: Desarrollo de sitios web
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 22/09/2012, 12:29
carlosbweb
 
Fecha de Ingreso: septiembre-2012
Mensajes: 2
Antigüedad: 12 años, 3 meses
Puntos: 0
Desarrollo de sitios web
bUEN dia mi primer aporte y va para quienes dominen AJAX jquery
tiene algun que otro problemita me viene bien una ayuda y para contribuir con el foro y el aprendizaje de la gente

Código HTML: 
Ver original
  1. [U]INDEX.HTML[/U]
  2.  
  3. <!DOCTYPE html>
  4. <html>
  5.     <head>
  6.         <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
  7.         <meta property="og:title" content="::Fixture Futbol::"/>
  8.         <meta property="og:type" content="website"/>
  9.         <meta property="og:image" content="img/screenshot.jpg"/>
  10.         <meta property="og:site_name" content="Fixture Futbol"/>
  11.         <meta property="fb:app_id" content="331488756873740"/>
  12.         <title>:::Fixture Futbol:::</title>
  13.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  14.         <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.9/jquery.validate.min.js"></script>
  15.         <script type="text/javascript" src="js/modernizr.js"></script>
  16.         <script type="text/javascript" src="js/validaform0.js"></script>
  17.         <script type="text/javascript" src="js/messages_es.js" charset="iso-8859-1"></script>
  18.         <script type="text/javascript" src="js/alertas.js"></script>
  19.         <link rel="stylesheet" type="text/css" href="css/reset.css" media="screen"/>
  20.         <link rel="stylesheet" type="text/css" href="css/estilo.css" media="screen"/>
  21.         <link rel="stylesheet" type="text/css" href="css/alertas.css" media="screen"/>
  22.         <link rel="shortcut icon" href="favicon.ico"/>
  23.     </head>
  24.     <body>
  25.         <div id="login">
  26.             <div id="box-login">
  27.                 <form id="formulario" name="formulario" action="Php/login.php" method="post">   
  28.                     <pre>Nombre</pre><p><input type="text" name="nombre" id="nombre"  class="required name" placeholder="admin"/><span id="checkname" /></p>
  29.                     <br/><br/>
  30.                     <pre>Clave</pre><p><input type="password" name="clave" id="clave"  class="required pass" placeholder="admin"/><span id="checkpass" /></p>
  31.                     <br/><br/>
  32.                     <input type="submit" id="enviar" class="enviar" value="ENTRAR"/>
  33.                     <input type="hidden" name="submitted" value="TRUE"/>
  34.                 </form>
  35.             </div>
  36.         </div>
  37.     </body>
  38. </html>


Código Javascript: 
Ver original
  1. [U]VALIDAFORM0[/U]
  2.  
  3. $(document).ready(function()
  4. {
  5.     $("#formulario").validate();
  6.     $("#enviar").click(function(e)
  7.     {
  8.         /* e.preventDefault();  crea un bug formularios sin plugins hoy en dia son un asco y vienen con errores*/
  9.         if($("#formulario").valid()==false)
  10.         {
  11.            $("#formulario").validate().numberOfInvalids();
  12.         }
  13.         else
  14.         {
  15.  
  16.         var datos = 'nombre='+ nombre + '&clave=' + clave;
  17.             $.ajax({
  18.                 type: "POST",              
  19.                 url: "../Php/login.php",
  20.                 dataType: 'json',
  21.                 data: datos,
  22.                 success: function() {
  23.                       $('#checkname').text('Nombre valido!').addClass('msg_ok').animate({ 
  24.                       'right' : '130px',
  25.                       'background-color': '#16EA07',
  26.                       'border-radius': '4px 4px 4px 4px',
  27.                       'display': 'inline',
  28.                       'width': '140px',
  29.                       }, 5000);
  30.                       $('#checkpass').text('Clave valida!').addClass('pass_ok').animate({ 
  31.                       'right' : '130px',
  32.                       'background-color': '#16EA07',
  33.                       'border-radius': '4px 4px 4px 4px',
  34.                       'display': 'inline',
  35.                       'width': '140px',
  36.                       }, 5000);
  37.                 },
  38.                 error: function() {
  39.                       $('#checkname').text('Nombre incorrecto!').addClass('msg_error').animate({ 
  40.                       'right' : '130px',
  41.                       'background-color': '#FF0000',
  42.                       'border-radius': '4px 4px 4px 4px',
  43.                       'display': 'inline',
  44.                       'width': '140px',
  45.                       }, 5000);
  46.                       $('#checkpass').text('Clave incorrecta!').addClass('pass_error').animate({ 
  47.                       'right' : '130px',
  48.                       'background-color': '#FF0000',
  49.                       'border-radius': '4px 4px 4px 4px',
  50.                       'display': 'inline',
  51.                       'width': '140px',
  52.                       }, 5000);
  53.                 }
  54.                });
  55.              return false;
  56.         }
  57.     });   
  58. });

Código PHP: 
Ver original
  1. [U]LOGIN.PHP[/U]
  2.  
  3. <?php
  4. // Incluir conexion a bd
  5. include('lib.php');
  6. // Fin conexion a bd
  7.  
  8. // Paso 1: Recibimos el formulario:
  9. $db=connect('localhost','root','','futbol');
  10.  
  11. $usuario= mysqli_real_escape_string($db, trim($_POST['nombre'])); 
  12. $clave= mysqli_real_escape_string($db, trim($_POST['clave']));
  13.  
  14. // Paso 2: Validacion minima
  15. if (isset($_POST['submitted'])){
  16.     if(isset($usuario) && !empty($usuario) && isset($clave) && !empty($clave))  {
  17.     
  18.     // Paso 3: Conectamos a la db
  19.     $connect=connect('localhost','root','','futbol');
  20.     
  21.     // Verifica la conexion
  22.     if (mysqli_connect_errno()) {
  23.     printf("Conexion fallida: %s\n", mysqli_connect_error());
  24.     exit();
  25.     }
  26.     
  27.     // Paso 4: Hacemos la consulta a la Tabla por el usuario y la clave
  28.     $sql="SELECT NOMBRE FROM cuentas WHERE NOMBRE='$usuario' AND PW='$clave'";
  29.     
  30.     // Paso 5: vemos si hubo coincidencias en cada caso
  31.     $result=@mysqli_query($connect,$sql);
  32.     $row_cnt = $result->num_rows;
  33.     if($row_cnt>0) {
  34.     Si la cuenta existe
  35.     echo($datos);
  36.     sleep(5);
  37.     header("Location: ../index2.html");
  38.     }else{
  39.     Si la cuenta no existe
  40.     sleep(5);
  41.     echo($datos);
  42.     }
  43. }
  44. }
  45. ?>

Código Javascript: 
Ver original
  1. [U]MESSAGES_ES.JS[/U]
  2.  
  3. /*
  4.      * Translated default messages for the jQuery validation plugin.
  5.      * Locale: ES
  6.      */
  7.      jQuery.extend(jQuery.validator.messages, {
  8.       required: "Este campo es obligatorio.",
  9.       remote: "Por favor, rellena este campo.",
  10.       email: "Por favor, escribe una direccion de correo valida",
  11.       url: "Por favor, escribe una URL valida.",
  12.       date: "Por favor, escribe una fecha valida.",
  13.       dateISO: "Por favor, escribe una fecha (ISO) valida.",
  14.       number: "Por favor, escribe un numero entero valido.",
  15.       digits: "Por favor, escribe solo digitos.",
  16.       creditcard: "Por favor, escribe un numero de tarjeta valido.",
  17.       equalTo: "Por favor, escribe el mismo valor de nuevo.",
  18.       accept: "Por favor, escribe un valor con una extension aceptada.",
  19.       maxlength: jQuery.validator.format("Por favor, no escribas mas de {0} caracteres."),
  20.       minlength: jQuery.validator.format("Por favor, no escribas menos de {0} caracteres."),
  21.       rangelength: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1} caracteres."),
  22.       range: jQuery.validator.format("Por favor, escribe un valor entre {0} y {1}."),
  23.       max: jQuery.validator.format("Por favor, escribe un valor menor o igual a {0}."),
  24.       min: jQuery.validator.format("Por favor, escribe un valor mayor o igual a {0}.")
  25.     });
  26.     jQuery.validator.addMethod("name", function(value, element, params) {
  27.         return this.optional(element) || /^[a-z\_]{5}$/i.test(value);
  28.         }, jQuery.format("Por favor, solo caracteres validos"));
  29.         
  30.     jQuery.validator.addMethod("pass", function(value, element, params) {
  31.         return this.optional(element) || /^[a-z\_]{5}$/i.test(value);
  32.         }, jQuery.format("Por favor, solo caracteres validos"));