Problema con AJAX

DAVIDksa · 14 Abr 2014

Buenas,

estoy aprendiendo a usar AJAX, pues resulta que al dar click a un botón dentro de un form no envía los datos.

Insertar CODE, HTML o PHP:

$('input[name="login"]').click(function()	{
		var username = $('#username').val();
		var password = $('#password').val();
		$.ajax({
			type: 'POST',
			url: '/?module=login&special_content=true',
			data:{'username':username,'password':password, 'action':'login'},
			success: function(e) {
				if(e == false)
				{
				}
				else
				{
					document.location.href = e;
				}
			}
		});
	});

El form es este:

Insertar CODE, HTML o PHP:

<section style="width: 400px; margin: 10% auto; float: none;" id="box">
	<section id="box-header">
		<div id="box-title">%header_login%</div>
	</section>
	<section id="box-content" style="float: none;">
		<form method="POST" action="./">
			%login_username%<br>
			<input type="text" style="width: 100%;" class="input" name="username" placeholder="%login_input_user%" required/><br>
			%login_password%<br>
			<input type="password" style="width: 100%;" class="input" name="password" placeholder="%login_input_pass%" required/><br>
			<input type="button" id="login-button" style="width: 100%; box-sizing: border-box;" class="btn btn-red" name="login" value="%login_button%" />
		</form>
		<center><div style="margin-top: 5px;"> %login_or% <a href="?module=register">%login_signup%</a></div></center>
	</section>
</section>

Javieer · 14 Abr 2014

Puedes revisar que error te da en la consola, la puedes activar con F12, pero a simple vista noto que no existe #username ni #password, para esto tendrías que agregar los ids a tus inputs

HTML:

<input type="text" style="width: 100%;" class="input" id="username" name="username" placeholder="%login_input_user%" required/>

<input type="password" style="width: 100%;" id="password" class="input" name="password" placeholder="%login_input_pass%" required/>

zenok · 16 Abr 2014

Puedes obtener los datos directamente desde el formulario:

Insertar CODE, HTML o PHP:

$(document).on('click', '#login-button', function() {    var form = $('#formulario').serialize();
    
    $.post('/?module=login&special_content=true', form, function(response) {
        alert(response);
    });
    
    return false;
});

HTML:

<section style="width: 400px; margin: 10% auto; float: none;" id="box">	<section id="box-header">
		<div id="box-title">%header_login%</div>
	</section>
	<section id="box-content" style="float: none;">
		<form method="POST" action="./" id="formulario">
			%login_username%<br>
			<input type="text" style="width: 100%;" class="input" name="username" placeholder="%login_input_user%" required/><br>
			%login_password%<br>
			<input type="password" style="width: 100%;" class="input" name="password" placeholder="%login_input_pass%" required/><br>
			<input type="button" id="login-button" style="width: 100%; box-sizing: border-box;" class="btn btn-red" name="login" value="%login_button%" />
		</form>
		<center><div style="margin-top: 5px;"> %login_or% <a href="?module=register">%login_signup%</a></div></center>
	</section> </section>

ciap · 25 Abr 2014

Que tal DAVIDksa, vi tu duda, por lo que observe me surgió la duda de si por lo menos te toma el evento click del botón, voy a proponerte una serie de pasos para checkear si funciona todo ok.

Primero: Inserta un alert en el primer renglón de la función para probar si se accede bien al evento.

Insertar CODE, HTML o PHP:

$('input[name="login"]').click(function()	{
                alert('Todo ok');
		var username = $('#username').val();
		var password = $('#password').val();
		$.ajax({
			type: 'POST',
			url: '/?module=login&special_content=true',
			data:{'username':username,'password':password, 'action':'login'},
			success: function(e) {
				if(e == false)
				{
				}
				else
				{
					document.location.href = e;
				}
			}
		});
	});

Segundo: Si no se pudo acceder al evento click por favor no filtres por el atributo name, es mejor práctica desde jquery llamarlo por ejemplo por el id que además es único por cada control html es decir... así.

Insertar CODE, HTML o PHP:

$('#login-button').click(function()	{
      alert('Todo ok');
                alert('Todo ok');
		var username = $('#username').val();
		var password = $('#password').val();
		$.ajax({
			type: 'POST',
			url: '/?module=login&special_content=true',
			data:{'username':username,'password':password, 'action':'login'},
			success: function(e) {
				if(e == false)
				{
				}
				else
				{
					document.location.href = e;
				}
			}
		});
	});

Tercero: a tu llamada por ajax al servidor tenes que agregarle la función error y captar el error (por buena práctica) y para ver si la llamada se puede realizar o no. Esto quedaría así..

Insertar CODE, HTML o PHP:

$('#login-button').click(function()	{
                alert('Todo ok');
		var username = $('#username').val();
		var password = $('#password').val();
		$.ajax({
			type: 'POST',
			url: '/?module=login&special_content=true',
			data:{'username':username,'password':password, 'action':'login'},
			success: function(e) {
				if(e == false)
				{
				}
				else
				{
					document.location.href = e;
				}
			}
                      error: function (error) {
                                    alert('Error al intentar hacer la llamada al servidor');
                                     //con la variable error podes guardarla o hacer algo, es lo que retorna el servidor como error.
              }
		});
	});

Espero que esta serie de pasos puedan resolver tu problema, si es así sería genial!. Saludos!

sandercrow · 9 Jun 2014

No me ha quedado claro si utilizas AJAX porque realmente así lo quieres o sólo porque el botón no envía el formulario. Si es la primera opción, estupendo. Pero si el la segunda opción basta con que cambies el tipo de input a type="submit" en lugar de type="button".

A ver si vamos a estar matando moscas a cañonazos...

DanielDeick · 13 Jun 2014

una corta introducción:

En lo personal; yo prefiero manejar ajax con PHP ( POO ); debido no solo a que es mucho mas eficaz
al momento de llamar una función ( login, register o etc... ) entonces como arias el sistema en PHP

PHP:

<?php 
class MyClass
{
      public static function Login($user, $pass)
      {
              $u = strip_tags($user);
              $p = strip_tags($pass);
              
              if(!empty($u) && !empty($p))
              {
                    return "bienvenido".$u."Los datos se han enviado con éxito";
              } else {
                    return "no dejes campos vacíos";
              }
      }
}

new MyClass;
?>

entonces creas un archivo donde guardaras la clase ej: init.php

PHP:

require("MyClass.class.php");

entonces creas un archivo llamado actions.php
entonces pones allí:

PHP:

# el archivo init creado anteriormente lo requerimos
require("init.php");
if($_GET['users'] == "login")
          echo MyClass::Login($_POST['user'], $_POST['pass']);

despues el formulario en html que puede ser:
no olvides llamar el init.php

HTML:

<?php 
 require("init.php");
?>
<section class="login">
      <div class="loginResult"></div>
      <input type="text" class="user" />
      <input type="password" class="pass" />
      <button onclick="login();">Logearme</button>
</section>

entonces el archivo javascript a llamar seria este:

Insertar CODE, HTML o PHP:

function login() 
{
       $(document).ready(function(){
             var usario = $(".user").val();
             var contra = $(".pass").val();
             $.ajax({
                    beforeSend: function(){
                           $(".loginResult").html("espera un momento...");
                    },
                    url: "actions.php?users=login"
                    type: "post",
                    data: {
                         user: usario,
                         pass: contra,
                    },
                    success: function(r)
                    {
                           $(".loginResult").html(r);
                    }
             });
       });
}

Espero te resulte un saludo, cualquier cosa puedes contactarme.

Si tienes una duda de por que en data esta:

user:
pass:

es debido a que son los valores que has dado en el actions.php que son $_POST['user'], $_POST['pass'];

entonces esos debes ponerlos allí.

Problema con AJAX

DAVIDksa Seguir

Javieer

zenok

ciap

sandercrow

DanielDeick