Antonella Framework: peticiones AJAX para tu plugin

Carlos Herrera

hace 5 años

Hoy vamos a hacer ejemplos de peticiones AJAX para nuestro plugin hecho con Antonella Framework de forma sencilla.

Para ello ya debeis tener un proyecto creado con Antonella Framework. Toda la info para crear un proyecto está aqui https://antonellaframework.com/documentacion para este ejemplo he llamado al namespace PJAX

Creando nuestro controlador

Para ellos vamos a crear nuestro controlador para poder crear un shortcode he insertar un html con un boton y nuestro javascript para nuestra petición AJAX.


php antonella make AjaxController

Dentro vamos a crear 2 funciones.

Una de ellas es para mostrar el formulario de prueba como un shortcode. Hemos hecho ya un manual de cómo crear shortcodes, puedes verlo aquí

<div>
<div>public function MostrarBoton()</div>
<div>{</div>
<div>$html = <<<EOT</div>
<div><form method="POST"></div>
<div><h1>Probamos nuestro AJAX</h1></div>
<div><div class="form-group"></div>
<div><label for="valor1">Valor para enviar por AJAX</label></div>
<div><input type="text" class="form-control" id="valor1" name="valor1" value=""></div>
<div><small id="emailHelp" class="form-text text-muted">Puedes poner aqui tu valor para enviar por ajax</small></div>
<div></div></div>
<div><button type="submit" name="enviar_ajax" class="btn btn-primary">Enviar</button></div>
<div></form></div>
<div><script type="text/javascript"></div>
<div>jQuery("form").submit(function(e) {</div>
<div>e.preventDefault(); // evita que se ejecute el formulario</div>
<div>var form = jQuery(this);</div>
<div></div>
<div>jQuery.ajax({</div>
<div>type: "POST",</div>
<div>url: "{$ajax_url}/?action=mi_peticion_ajax",</div>
<div>data: form.serialize(),</div>
<div>success: function(data)</div>
<div>{</div>
<div>              console.log( data);</div>
<div></div>
<div>}</div>
<div>});</div>
<div>    });</div>
<div></div>
<div></script></div>
<div>EOT;</div>
<div>return $html;</div>
<div>}</div>
</div>

La segunda función es donde procesaremos la petición Ajax

<div>
<div>public function procesar_ajax()</div>
<div>{</div>
<div>$post   = isset($_POST)?$_POST:"";</div>
<div>$response   = array();</div>
<div>$response['message']    = "Successfull Request";</div>
<div>$response['values'] = $post;</div>
<div>wp_send_json($response);</div>
<div>exit;</div>
<div>}</div>
</div>

Por último vamos a nuestro archivo Config.php y registramos las funciones. La primera como shortcode en la sección de shortcodes (aprox línea 59)

<div>
<div>/**</div>
<div>* add custom shortcodes</div>
<div>* @input array</div>
<div>* @example [['example','PJAXExampleController::example_shortcode']]</div>
<div>*/</div>
<div>public $shortcodes=[</div>
<div>['miajax',__NAMESPACE__.'AjaxController::MostrarBoton'],</div>
<div>];</div>
</div>

Y registramos la acción (línea 50 aprox)

<div>
<div>
<div>/**</div>
<div>* add_action data functions</div>
<div>* @input array</div>
<div>* @example ['body_class','PJAX::function',10,2]</div>
<div>* @example ['body_class',['PJAX','function'],10,2]</div>
<div>*/</div>
<div>public $add_action=[</div>
<div>['wp_ajax_mi_peticion_ajax',__NAMESPACE__.'AjaxController::procesar_ajax'],</div>
<div>['wp_ajax_nopriv_mi_peticion_ajax',__NAMESPACE__.'AjaxController::procesar_ajax'],</div>
<div>];</div>
</div>
</div>

wp_ajax y wp_ajax_no_priv son solicitudes de WordPress el primero se ejecuta cuando estas logueado como usuario de WordPress y el segundo (el no_priv) se ejecuta siempre, sin necesidad de estar logueado.

Y ya está. Ahora a empaquetar nuestro plugin y subirlo a nuestro WordPress. Vamos a nuestra consola y ejecutamos

php antonella makeup

puedes poner el shortcode [miajax] en cualquier página o entrada y verás el formulario. el resultado aparecerá en la consola del navegador.

Si te gustó no olvides compartirlo