Envio de formulario por Ajax

Descubre como enviar datos por ajax de manera sencilla y segura

Envio de formulario por Ajax

Hoy aprenderemos a realizar el envio de un formulario por ajax, para el backend se puede realizar con casi cualquier lenguaje web y para el frontend usaremos jquery ya que nos ayudará con sus métodos prácticos para ajax.


1. Maquetar formulario

Para comenzar a realizar este pequeño tutorial necesitamos tener un archivo *.html creado, estaremos trabajando con html5 en todo momento así que es importante resaltar que algunas propiedades en los controles de formulario son netamente funcionales en HTML5.


<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Enviar formulario con ajaxtitle>
<head>
<body>
    <form id="formulario" action="recibir.php" method="post">
        <input type="text" placeholder="Escribe tu nombre" name="nombre" required autofocus title="Ingresa tu nombre porfavor">
        <input type="number" placeholder="Ingresa tu edad" name="edad" required title="Ingresa tu edad porfavor">
        <br><br>
        <input type="submit" id="btnEnviar" name="btnEnviar" value="Enviar formulario">
    form>
    <hr>
    <p class="respuesta">

    <p>
    <script src="https://code.jquery.com/jquery-2.2.2.min.js">script>
    <script src="js/enviar.js">script>
<body>


En el archivo html vemos que tenemos un formulario con dos campos (Nombre, Edad) Los cuales serán enviados por método POST.

2. Archivo *.js

Para realizar el envío por medio de AJAX en este caso vamos a hacer uso de la librería Jquery, para lo cual insertamos el script haciendo referencia al jquery por encima de nuestro código o archivo en donde hacemos el ajax; Esto es importante de lo contrario vamos a tener problemas y al final no va a funcionar nuestro código.


<script src="https://code.jquery.com/jquery-2.2.2.min.js">script>
<script src="js/enviar.js">script>


Ahora vamos a ver nuestro código para realizar el envío:


$(document).ready(function () {
    $("#formulario").bind("submit",function(){
        // Capturamnos el boton de envío
        var btnEnviar = $("#btnEnviar");
        $.ajax({
            type: $(this).attr("method"),
            url: $(this).attr("action"),
            data:$(this).serialize(),
            beforeSend: function(){
                /*
                * Esta función se ejecuta durante el envió de la petición al
                * servidor.
                * */
                // btnEnviar.text("Enviando"); Para button 
                btnEnviar.val("Enviando"); // Para input de tipo button
                btnEnviar.attr("disabled","disabled");
            },
            complete:function(data){
                /*
                * Se ejecuta al termino de la petición
                * */
                btnEnviar.val("Enviar formulario");
                btnEnviar.removeAttr("disabled");
            },
            success: function(data){
                /*
                * Se ejecuta cuando termina la petición y esta ha sido
                * correcta
                * */
                $(".respuesta").html(data);
            },
            error: function(data){
                /*
                * Se ejecuta si la peticón ha sido erronea
                * */
                alert("Problemas al tratar de enviar el formulario");
            }
        });
        // Nos permite cancelar el envio del formulario
        return false;
    });
});


El método bind() se utiliza para conectar un controlador de eventos directamente a los elementos, es decir nosotros podemos invocar a un elemento $(".boton") y por medio del método bind() ejecutar uno o mas eventos sobre sí.

También dentro de este método bind() usamos un return false , esto sirve para cancelar el envió directo del formulario hacia el archivo php, dado que el ajax se ejecuta sobre la misma pantalla sin refrescarla.

3. El archivo *.php

Para poder hacer el envío del formulario y la lectura de los campos estamos haciendo uso de php, Lenguaje de programación de lado servidor.


echo "Hola ".$_REQUEST["nombre"].", Tienes ".$_REQUEST["edad"]." Años.";


Al final debemos encontrar un resultado como este cuando hagamos el envió del formulario.



Compartir:

0 Comentarios

Este curso no cuenta con comentarios aún, puedes ser el primero en dejar tu apreción, duda o consulta.

Comentar ahora

Tutor

Tutor
Cesar Mejia
Desarrollador de software

Post Relacionados

Cargar imágenes con PHP y Ajax

Te enseñamos la mejor forma de cargar imagenes con ajax y php


Conexión a MySQL con PDO en PHP

Aprende a conectarte a mysql con PDO en PHP - 2017


Calificación

4.5

5 Comentarios
Comentar ahora