[SOLUCIONADO] Problema con Jquery, AJAX y PHP

MyProductionsG · #1 (**permalink**) 28/08/2014, 10:37

Buenas, intento hacer un Request con AJAX, jQuery a PHP pero no recibo nada, alguna idea?

Código:

index2.html

Código Javascript:

Ver original<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
    <title>jQuery Request AJAX</title>
</head>
<body>
    <section class="container">
        <div class="page-header">
           <h1>jQuery Request AJAX 
              <small>Marc Garcia</small>
           </h1>
        </div>
        <article>
            <form>
                <label for="username">Nombre:<input type="text" name="username" id="username" class="form-control"></label>
                <label for="password">Pass:<input type="password" name="password" id="password" class="form-control"></label>
                <input type="button" name="submit" id="submit" class="btn btn-primary" value="Enviar">
            </form> 
            <div id="resultado"></div>
        </article>
    </section>  
</body> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
 
    <script>
        $("submit").click(function () {
            var sendu = $("#username").val();
            var sendp = $("#password").val();
 
            $.ajax({
                type: "POST",
                url: "request.php",
                data: "username="+sendu+"&password="+sendp,
                dataType: "json",
                success: function(msg, string, jqXHR) {
                    alert(msg);
                }
            });
 
        });
    </script>
 
</html>

request.php

Código PHP:

  <?php 
 
    $nombre = $_REQUEST['username']; 
    $password = $_REQUEST['password']; 
 
    $list = array('nombre'=>$nombre, 'password'=>$password); 
 
    $c = json_encode($list); 
 
    echo $c; 
 
?>

Alexis88 · #2 (**permalink**) 28/08/2014, 12:32

No recibes una respuesta porque nunca realizas la petición. Estás intentando tomar al botón de envío de la manera equivocada. Lo que debes de hacer es tomar al formulario y mediante el método submit, identificar el momento en el que se realiza el envío de los datos para así cancelar dicho evento con el método preventDefault y luego ejecutar el método Ajax. También podrías serializar los datos del formulario con el método serialize, así evitarás tener que tomar uno a uno los datos de cada elemento del formulario.

Código Javascript:

Ver original$("form").submit(function (event) {
    event.preventDefault(); //Aquí cancelo el envío 'normal' de los datos
 
    $.ajax({
        type: "POST",
        url: "request.php",
        data: $(this).serialize(),
        dataType: "json",
        success: function(msg, string, jqXHR) {
            alert(msg);
        }
    }); 
});

Por cierto, esto debiste de publicarlo en el sub-foro de jQuery. Tenlo en cuenta para la próxima vez.

Saludos

chichote · #3 (**permalink**) 28/08/2014, 19:14

te falta agregar el event prevent default dentro de tu funcion $("submit").click(function ()

La manera que te dice Alexis88 es la más adecuada por la simplicidad del manejo de los datos del formulario, pero lo que estás haciendo = debe funcionar si utilizar el event prevent default. Lo que ocurre con tu script es que te está recargando la pagina.

saludos,

MyProductionsG · #4 (**permalink**) 30/08/2014, 13:53

Sigo sin recibir nada, el codigo que me paso Alexis va dentro del evento Click no?

Alexis88 · #5 (**permalink**) 30/08/2014, 21:20

No. Todo eso reemplaza a lo que tienes desde la línea 29 a la 43 del código que originalmente mostraste.

Saludos