jueves, 6 de noviembre de 2014

ENVIANDO DATOS A PHP CON AJAX Y JQUERY

En este articulo me gustaría aportarles la manera fácil de enviar datos de un form con jquery  y ajax.
Comencemos con el código html que nos quedaría como el siguiente
    
        
        
        Tutorial
    
    
        

Tutorial jquery, ajax y php

El formulario nos quedaría como el que se muestra a continuación: Tutorial

Tutorial jquery, ajax y php





Ahora procederemos a crear nuestro script
 $(document).ready(function() {
        $("#formulario").submit(function(event){
          event.preventDefault();   
          var request;
          request=$.ajax({
              type: "POST",
              url: "enviar.php",
              data: $(this).serialize()
              });
         //deshabilita los inputs cuando hacemos el request
         var $inputs = $(this).find("input, select, button, textarea");
         $inputs.prop("disabled", true);
        //el request fue hecho con éxito
        request.done(function (response, textStatus, jqXHR){
             //mostramos la respuesta del request
             alert(response);
         });
         
        // callback handler that will be called on failure
        request.fail(function (jqXHR, textStatus, errorThrown){
        //ocurrio un  error
        alert(
            "Ha ocurrido el siguiente error "+
            textStatus, errorThrown);
    });
       //función que siempre se ejecutará
        request.always(function () {
            // reenable the inputs
            $inputs.prop("disabled", false);
            //limpia el formulario
            document.getElementById("formulario2").reset();
        });
    });
    
    });

Finalmente nuestro código php

0)
{   
      //obtenemos el nombre   
      $nombre=$_POST['nombre'];
      //obtenemos la edad
      $edad=$_POST['edad'];
      echo 'Bienvenido '.$nombre.' tu edad es: '.$edad;
    
}



El resultado es el que se muestra a continuación


No hay comentarios:

Publicar un comentario