Antonella Framework: peticiones AJAX para tu plugin

Carlos Herrera

hace 7 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.

[code lang=»shell»]

php antonella make AjaxController

[/code]

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í

[code lang=»php»]

public function MostrarBoton()

{

$html = <<<EOT

<h1>Probamos nuestro AJAX</h1>

<label for=»valor1″>Valor para enviar por AJAX</label>

<small id=»emailHelp» class=»form-text text-muted»>Puedes poner aqui tu valor para enviar por ajax</small>

</div>

<button type=»submit» name=»enviar_ajax» class=»btn btn-primary»>Enviar</button>

</form>

jQuery(«form»).submit(function(e) {

e.preventDefault(); // evita que se ejecute el formulario

var form = jQuery(this);

jQuery.ajax({

type: «POST»,

url: «{$ajax_url}/?action=mi_peticion_ajax»,

data: form.serialize(),

success: function(data)

{

console.log( data);

}

});

</script>

EOT;

return $html;

}

[/code]

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

[code lang=»php»]

public function procesar_ajax()

{

$post = isset($_POST)?$_POST:»»;

$response = array();

$response[‘message’] = «Successfull Request»;

$response[‘values’] = $post;

wp_send_json($response);

exit;

}

[/code]

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)

[code lang=»php»]

/**

* add custom shortcodes

* @input array

* @example [[‘example’,’PJAXExampleController::example_shortcode’]]

public $shortcodes=[

[‘miajax’,__NAMESPACE__.’AjaxController::MostrarBoton’],

];

[/code]

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

[code lang=»php»]

/**

* add_action data functions

* @input array

* @example [‘body_class’,’PJAX::function’,10,2]

* @example [‘body_class’,[‘PJAX’,’function’],10,2]

public $add_action=[

[‘wp_ajax_mi_peticion_ajax’,__NAMESPACE__.’AjaxController::procesar_ajax’],

[‘wp_ajax_nopriv_mi_peticion_ajax’,__NAMESPACE__.’AjaxController::procesar_ajax’],

];

[/code]

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

[code lang=»shell»] php antonella makeup
[/code]

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