WordPress - Manejos de datos con AJAX y WORDPRESS

CREATE TABLE wp_ejemplo (

    ID INT AUTO_INCREMENT PRIMARY KEY,

    Nombre VARCHAR(255),

    Apellido VARCHAR(255),

    Edad INT

);

jQuery(document).ready(function($) {

    // Captura el evento del formulario

    $('#formulario').on('submit', function(e) {

        e.preventDefault();

        // Obtiene los valores del formulario

        var nombre = $('#nombre').val();

        var apellido = $('#apellido').val();

        var edad = $('#edad').val();

        // Realiza la solicitud AJAX

        $.ajax({

            url: ajaxurl, // URL de la función AJAX de WordPress

            type: 'POST',

            data: {

                action: 'insertar_datos', // Nombre de la función de WordPress

                nombre: nombre,

                apellido: apellido,

                edad: edad

            },

            success: function(response) {

                // Maneja la respuesta del servidor

                alert('Datos insertados correctamente');

                // Puedes realizar otras acciones aquí, como actualizar la página o mostrar un mensaje de éxito

            },

            error: function(xhr, status, error) {

                // Maneja los errores de la solicitud AJAX

                alert('Error al insertar los datos');

                // Puedes mostrar un mensaje de error o realizar otras acciones aquí

            }

        });

    });

});

function insertar_datos() {

    global $wpdb;

    // Obtiene los valores enviados por AJAX

    $nombre = $_POST['nombre'];

    $apellido = $_POST['apellido'];

    $edad = $_POST['edad'];

    // Inserta los datos en la tabla

    $wpdb->insert(

        'wp_ejemplo',

        array(

            'Nombre' => $nombre,

            'Apellido' => $apellido,

            'Edad' => $edad

        )

    );

    // Devuelve una respuesta al cliente

    wp_send_json_success();

}

add_action('wp_ajax_insertar_datos', 'insertar_datos');

add_action('wp_ajax_nopriv_insertar_datos', 'insertar_datos');

<form id="formulario">

    <label for="nombre">Nombre:</label>

    <input type="text" id="nombre" name="nombre" required>

    <label for="apellido">Apellido:</label>

    <input type="text" id="apellido" name="apellido" required>

    <label for="edad">Edad:</label>

    <input type="number" id="edad" name="edad" required>

    <button type="submit">Guardar</button>

</form>