Cómo llamar a una función PHP con Ajax cuando el usuario hace clic en un botón

Question

Cómo llamar a una función PHP con Ajax cuando el usuario hace clic en un botón

8 sept 2018, 01:12:19

Vistas: 42.3K

Votos: 6

Estoy desarrollando un sitio WordPress usando plantillas/temas personalizados, pero estoy teniendo problemas. Quiero usar Ajax para llamar a una función cuando un usuario hace clic en un botón. En una página, tengo un botón así:

<p class='form-submit'>
        <input name='message_read' type='submit' class='submit button mark-as-read' value='Marcar como leído' />
    </p>

Y tengo una función jQuery/Ajax como esta:

jQuery(document).ready(function() { 
   jQuery(".mark-as-read").click(function () {
    console.log('La función está conectada');
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'mark_message_as_read',
        },
        success: function (output) {
           console.log(output);
        }
        });
    });
});

La función anterior vive en wp-content/themes/my-theme/js/wp_ajax_calls.js. Agregué el script al sitio así:

1) Agregué esto a mi archivo functions.php:

wp_enqueue_script(  'ajax calls', get_template_directory_uri() .'/js/wp_ajax_calls.js', array('jquery'), '1.0', true);

2) Incluí el script en el encabezado.

<script type="text/javascript" src="https://mysite//wp-content/themes/twentyfifteen/js/wp_ajax_calls.js"></script>

Cuando hago clic en el botón, aparece el mensaje console.log. Según tengo entendido, quiero que mi función ajax llame a una función php que me permita usar $wpdb. Tengo esto en functions.php:

function mark_message_as_read() {
    global $wpdb;
    // hacer cosas
}

Aquí es donde me estoy confundiendo. Tengo dos preguntas principales:

1) Creo que se supone que debo tener algunos add_action() en algún lugar, pero no sé dónde ponerlos y tampoco sé qué gancho debería usar.

2) Además, quiero poder pasar datos (el ID del mensaje) a la función php para mi consulta db. ¿Cómo paso un argumento a esa función?

No quiero usar algo como if( isset($_POST['message_whatever']) ) twentyfifteen_message_whatever(); debido a la forma en que tengo configurados los mensajes.

¡Feliz de proporcionar más información si es necesario. ¡Gracias de antemano por tu ayuda!

ellen

345

ajax wpdb

Comentarios

Por favor, consulta la documentación.

Jacob Peattie

8 sept 2018 07:59:17

Todas las respuestas a la pregunta

Comentarios

¡Muchas gracias! Definitivamente también echaré un vistazo a los nonces. :D

ellen

8 sept 2018 18:44:49

Mike 574 · Accepted Answer · 2018-09-08T09:03:38Z

Crea un tema hijo para no modificar el código de un tema existente, ya que la próxima vez que actualices el tema podrías perder todos tus cambios (consulta Temas Hijos)

Aquí te mostramos cómo pasar valores a tu solicitud AJAX:

jQuery(document).ready(function() { 
   jQuery(".mark-as-read").click(function () {
    console.log('La función está conectada');
    jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'mark_message_as_read',
            // añade tus parámetros aquí
            message_id: $('.your-selector').val()
        },
        success: function (output) {
           console.log(output);
        }
        });
    });
});

Puedes investigar también sobre Nonces para añadir una capa de seguridad a tu aplicación: https://codex.wordpress.org/WordPress_Nonces

Finalmente, el código PHP para manejar la solicitud (aquí también deberías manejar el nonce en código real):

// registrar la acción AJAX para usuarios autenticados
add_action('wp_ajax_mark_message_as_read', 'mark_message_as_read');

// registrar la acción AJAX para usuarios no autenticados
add_action('wp_ajax_nopriv_mark_message_as_read', 'mark_message_as_read');

// manejar la solicitud AJAX
function mark_message_as_read() {
    $message_id = $_REQUEST['message_id'];

    // añade tu lógica aquí...

    // al final, devuelve datos JSON de éxito
    wp_send_json_success([/* algunos datos aquí */]);

    // o, en caso de error, devuelve datos JSON de error
    wp_send_json_error([/* algunos datos aquí */]);
}