Aceptar llamada AJAX con datos de formulario serializados

Cuando trabajo con AJAX y Formularios en WordPress, me gusta codificar la acción AJAX directamente en el formulario para que la serialización funcione sin problemas. De hecho, escribí un artículo sobre esto el año pasado: https://webdevstudios.com/2015/02/12/handling-ajax-in-wordpress/

Pero estás aquí por respuestas, no por un artículo de blog, así que aquí está la parte resumida. Tienes tres partes aquí: primero está el formulario HTML. Puedes aprovechar serialize() colocando la acción en un campo oculto del formulario, aquí un ejemplo:

<form class="my_form">
    <?php wp_nonce_field( 'my_action_nonce' ); ?>
    <input type="hidden" name="action" value="my_action" />
    <!-- Más campos aquí... -->
    <input type="submit" name="submit" value="Enviar" class="submit_form_btn" />
</form>

Observa el campo oculto llamado action. Por supuesto, mantuve wp_nonce_field() ya que, bueno, problemas de seguridad.

La segunda parte es el jQuery real. Como se mencionó antes, no necesitas acceder a AJAX a través del objeto jQuery original ya que ya lo pasaste como $, pero en realidad no hace daño, solo es mala práctica.

jQuery( document ).ready( function( $ ) {
    $( '.submit_form_btn' ).on( 'click', function( evt ) {
        // Detener el envío predeterminado del formulario
        evt.preventDefault();
        // Serializar todo el formulario, que incluye la acción
        var serialized = $( '.my_form' ).serialize();
        $.ajax( {
            url: ajaxurl, // Esta variable está en algún lugar
            method: 'POST',
            data: serialized, // Aquí están nuestros datos serializados
        } ).done( function( result ){
            // Manejar el resultado aquí...
        } );
    } );
} );

Intenté comentar el código lo mejor que pude, debería tener más sentido, pero déjame explicar. Primero detienes el envío del formulario con el método preventDefault() del objeto evt (abreviatura de event).

Luego serializas los datos del formulario y los guardas en una variable. Supongo que podrías acortarlo y simplemente colocarlo directamente en el objeto data, pero eso depende de ti.

La parte final, bueno, necesitas ver lo que estás enviando, ¿verdad? Ahí es donde error_log y print_r son útiles, así es cómo:

<?php

function handle_ajax() {
    // Aquí verificas tu nonce
    if ( ! wp_verify_nonce( $_POST['_wpnonce'], 'my_action_nonce' ) ) {
        // Puedes retornar o usar cosas ingeniosas con JSON
        wp_send_json_error();
    }
    // Aquí deberías obtener TODOS tus datos en una variable $_POST
    // o puedes hacer algo como esto y luego revisar tu registro de errores

    error_log( print_r( $_POST, 1 ) );

    // Esto imprimirá TODA la variable $_POST en tu debug.log si lo tienes
    // habilitado; si no, va al registro de errores de PHP

}
add_action( 'wp_ajax_my_action', 'handle_ajax' );

Ahora eso DEBERÍA manejar tu AJAX por ti. Lo que hagas con los datos depende de ti.

¿Por qué estás usando jQuery.ajax?

Cuando defines jQuery(document).ready(function($) {... $ se convierte en tu variable global de jQuery. Contenedor noConflict de jQuery en WordPress

Tu llamada AJAX debería parecerse a esto:

$.ajax({
type : 'post',
url : ajaxurl,
etc : ....

Además, no puedes simplemente pasar una cadena de variables. Primero necesitas definirlas en un objeto y pasar ese objeto.

Prueba esto:

get_data = $('#my-form').serialize();
var data = {action: 'process_request', add_my_data: get_data, my_nonce: nonce};

No estoy seguro sobre el serializado... ya que pensé que WordPress ya hace eso durante el proceso de envío AJAX. Quizás necesites investigar más sobre eso.