Ejecutar Funciones Con AJAX En WordPress

Aquí explico algunos puntos que debemos tomar en cuenta para poder hacer uso de funciones usando AJAX con WordPress. Suponiendo que tenemos la siguiente función que nos permita salvar datos en nuestra base de datos, por ej. un post. Si estas trabajando en un tema este función debería ir en functions.php.

function ajax_save_data() {	
  if ( wp_verify_nonce( $_REQUEST['nonce'], 'ajax_security_nonce' ) ) {
    if ( $save_type == 'save' ) {
      // lo que sea que se quiera hacer con los datos
    }	
  }
}
add_action( 'wp_ajax_save_data_action', 'ajax_save_data' );

Tomando en cuenta una estructura HTML como la siguiente dentro del formulario.

<form id="form" method="post" action="options.php" enctype="multipart/form-data">
  <span id="ajax_admin_options_nonce" class="hidden"><?php echo wp_create_nonce( 'ajax_admin_options_nonce' ); ?></span>

  <!-- Inputs de Ejemplo -->
  <input id="ejemplo_1" name="ejemplo_1" type="text" value="valor a enviar 1" />
  <input id="ejemplo_2" name="ejemplo_2" type="text" value="valor a enviar 2" />
  <button id="button" type="button">Enviar</button>
</form>

Donde wp_create_nonce se utiliza para fines de seguridad para protegerse contra peticiones inesperadas o duplicados que podrían causar cambios permanentes o irreversible en nuestro sitio web y en particular en la base de datos.

Usando jQuery solo tenemos que realizar la solicitud con Ajax.

// Ajax Request - Save Data
jQuery('#button').click( function( evt ) {
  // Obtenemos los datos
  var security = jQuery('#ajax_admin_options_nonce').text();
  var frm = jQuery('#form').serialize();
  
  // Creamos el objecto
  var data = {
    type: 'save',
    action: 'ajax_save_data_action', // esta es la acción que usamos arriba como alias para wp_jax
    data: frm, // formulario
    nonce: security // seguridad
  }
  
  // ajaxurl es una variable por defecto que utiliza wordpress
  // para hacer referencia a '/wp-admin/admin-ajax.php'
  jQuery.post(ajaxurl, data, function(response) {
    /*
     Lo valores correspondiente a la respuesta son 0, 1, y -1 localizados en ajax_save_data().
    */
   
    // Ahora condicionamos la respuesta del servidor
    if( response == 0) {
      // La solicitud se ha realizado correctamente
    } else if( response == 1 ) {
      // La solicitud se ha realizado correctamente, pero el almacenamiento de datos no
    } else if( response == -1 ) {
      // Error en la solicitud del control de seguridad para el nonce
    }
  });
});

Lo que hace el script es capturar el valor del nonce para fines de seguridad y capturar los datos del formulario cuando se realice el submit del mismo. En los datos también pasamos como parametro el type: 'save' para condicionar la petición en caso de que se tenga mas de un script haciendo una solicitud de ajax.

  • Belkys Julieth Cárdenas Maldon

    No me funcionó.