Como crear formulario HTML y PHP sin recargar la pagina con AJAX

1. Nos dirigimos a la pagina para obtener el codigo para poder usar AJAX en nuestro proyecto. Link

2. Creamos un archivo html para pegar el link de la biblioteca y debe quedar de esta forma dentro de la etiqueta <head>.

index.html

                    
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</head>

3. Procedemos a crear el formulario y codigo js para la funcion que deseamos realizar.

index.html

                    
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <title>Document</title>
</head>

<body>
    <form id="formulario" method="post">
        <label for="nom">Nombre:</label><input type="text" name="nombre" id="nom">
        <label for="ape">Apellido:</label><input type="text" name="apellido" id="ape">
        <label for="ed">Edad:</label><input type="text" name="edad" id="ed">
        <button type="button" id="enviar">Enviar</button>
    </form>

    <div id="resultado">

    </div>

    <script>
        // Asocia una función al evento click del botón con id "enviar"
        $("#enviar").click(function () {

            // Configura la llamada AJAX
            $.ajax({
                // Especifica la URL del servidor a la que se enviarán los datos
                url: "datos.php", 
                
                // Define el método HTTP para la solicitud (en este caso, POST)
                type: "post", 
                
                // Serializa los datos del formulario y los prepara para ser enviados
                data: $("#formulario").serialize(), 
                
                // Define una función que se ejecuta cuando la solicitud es exitosa
                success: function (resultado) {
                    // Inserta el resultado devuelto por el servidor en el div con id "resultado"
                    $("#resultado").html(resultado);
                }
            });
        });
    </script>
</body>

</html>

4. Ahora procedemos a crear un archivo php llamado datos.php donde enviaremos los datos.

datos.php

                        
<?php
$nombre = $_POST["nombre"];
$apellido = $_POST["apellido"];
$edad = $_POST["edad"];

echo "El nombre capturado es $nombre con apellido $apellido y tiene una edad de $edad años.";
?>

5. Listo, solo falta ejecutarlo en tu navegador web y probar que el mensaje se meustre sin recargar la pagina.

Descargar proyecto Tutorial youtube

MemoCode - PHP

MemoCode

Como crear formulario HTML y PHP sin recargar la pagina con AJAX