Antonella Framework: peticiones AJAX para tu plugin

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í

public function MostrarBoton()
{
$html = <<<EOT
<form method="POST">
<h1>Probamos nuestro AJAX</h1>
<div class="form-group">
<label for="valor1">Valor para enviar por AJAX</label>
<input type="text" class="form-control" id="valor1" name="valor1" value="">
<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>
<script type="text/javascript">
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;
}

 

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

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

 

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)

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

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

/**
* 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'],
];

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

Entrada anterior
Crear un shortcode con Antonella Framework
Entrada siguiente
¿Qué hacer para que se queden en tu web?: 10 consejos vitales para organizar tu web.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Rellena este campo
Rellena este campo
Por favor, introduce una dirección de correo válida.
Necesita estar de acuerdo con los términos para continuar

Menú