Eseguire chiamate AJAX con jQuery e JSON in WordPress

Ajax and WordPress

Succede sempre più di frequente di dover effettuare delle chiamate ajax in WordPress. In questo articolo vedremo come effettuare delle chiamate asincrone senza dover creare nuove pagine WordPress ma sfruttando lo script utilizzato dall’interfaccia del wp-admin.
Nell’esempio in questione, la chiamata AJAX restituirà un file JSON formato davvero utile per rappresentare i dati restituiti da una query. Lato javascript useremo la funzione $.getJSON(…) di jQuery mentre lato server scriveremo il nostro script all’interno del file functions.php presente in qualsiasi tema WordPress.

Per prima cosa dobbiamo creare la corrispondenza tra una nuova action e la nostra funzione php:

add_action('wp_ajax_myaction', 'my_function');

Fatto ciò possiamo scrivere la nostra funzione my_function la quale corrisponderà all’azione myaction (il nome è puramente indicativo, potete chiamare l’azione e la funzione come preferite):

function my_function() {
  global $wpdb;
  $id = $_GET['id'];
  $rows = array();
  $q = "SELECT * FROM my_table WHERE id = ".$id;
  $rows['results'] = $wpdb->get_results($q, ARRAY_A);
  if(count($rows) <= 0){
    return false;
  }
  echo json_encode($rows);
  exit();
}

In questo script trovate tutto l’indispensabile per completare la parte lato server. Come si può intuire la query dovrà utilizzare un parametro passato in GET, poi utilizzando la variabile globale wpdb effettueremo la query sul database. La json_encode trasformerà l’array associativo con i record letti tramite la SELECT in una stringa JSON e la stamperemo a video tramite l’echo. Non dimenticate la exit() finale perchè altrimenti verrà stampato uno “0” che vi metterà in difficoltà nel parsificare il JSON.

Un ultimo particolare di cui tenere conto è che la add_action crea un’azione per l’admin-ajax.php che è un file accessibile solo da utenti loggati, quindi per consentire l’esecuzione dell’azione sia da utenti registrati sia da ospiti sarà necessario aggiungere un’ulteriore linea di codice come questa:

add_action('wp_ajax_nopriv_myaction', 'my_function');

Dopo aver completato lo script PHP possiamo passare al lato client, con il codice javascript per la chiamata della funzione:

$jQ.getJSON('<?php echo get_bloginfo('url'); ?>/wp-admin/admin-ajax.php',{action: 'myaction',id: 'tuo_id'}, function(json){...Codice javascript per parsificare il json...}

Ho omesso l’inclusione di jquery in WordPress, ma potete trovare come fare in un mio precedente articolo che trattava l’argomento nello specifico.

A questo punto non vi resta che sbizzarrirvi con le chiamate ajax nel vostro template oppure dai vostri plugin (in quest’ultimo caso basta spostare il codice PHP in un file del vostro plugin).

Librerie Jquery…for programmers only!

Librerie JQuery

Da qualche giorno sul lavoro ho dovuto realizzare un’applicazione in jsp che permettesse, al click su un link, di far comparire dei dati aggiuntivi… Appena ho sentito cosa dovevo fare, lo stack-trace della mia memoria era all’incirca questo:

AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX…AJAX

Mi sono quindi sbattuto altamente… per cercare qualcosa che mi semplificasse il lavoro…:-P.

Dopo breve googleggiamento mi sono imbattuto in una libreria Javascript che dopo poco ho scoperto essere molto sciccosa… JQuery mette a disposizione infatti molti strumenti, sia per creare effetti grafici con javascript, sia per gestire gli eventi sui vari oggetti presenti nella pagina  e non ultimo di utilizzare AJAX in modo molto semplice…

Bè ora potete spassarvela con queste librerie… Ah dimenticavo, vengono utilizzate da Google, Dell e molti altri ancora, anche per questo credo che siano davvero un ottimo strumento…

Se le volete provarle, il link per scaricarle è questo:  http://docs.jquery.com/Downloading_jQuery

Se non avete idea di metterci le mani dentro, vi basterà scaricare il minified, dovrebbe essere la versione compressa che funziona allo stesso modo del .js… Buon lavoro![ad]