Chiamate AJAX con jQuery
Write Less Do More
Motto di jQuery
- Prerequisiti
- Richiedere un file HTML
- Visualizzare un file JSON
- Ricezione di un file JSON da un script PHP e MySQL
- Inviare parametri ad uno script PHP e MySQL e leggere la risposta
- Link utili
Per quanto riguarda le chiamate AJAX di cui abbiamo parlato nel seguente articolo: Chiamate AJAX possiamo notare il risparmio in numero di righe di codice per effettuare e gestire le chiamate
Prerequisiti per le chiamate AJAX con jQuery
Un server Apache HTTP ed un server MySQL (tipo LAMP, MAMP o XAMPP)
La libreria jQuery scaricabile dal sito www.jquery.com
Conoscenza di HTML, Javascript, PHP e MySQL
Richiedere un file HTML
Utilizzeremo questa semplice pagina web per richiamare il contenuto di un file html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Request HTML</title>
</head>
<body>
<div id="content">
</div>
<button id="fetch-data">Carica i dati</button>
<script src="js/jquery-3.6.1.js"></script>
<script src="js/request-html.js"></script>
</body>
</html>
Nota: il file jquery-3.6.1.js deve essere incluso prima del/i files che utilizzeranno jQuery.
Il file request-html.js :
function loadData(){
$.get('data/data.html')
.done(function(data){
$('#content').html(data);
})
.fail(function(){
$('#content').html('<p>riprova più tardi</p>')
});
}
$('#fetch-data').on('click',function(){
loadData();
});
utilizziamo il metodo get di jQuery in cui specifichiamo il percorso del file sul server, i metodi done e fail come è facilmente intuibile contengono le istruzioni da eseguire in caso di successo o di insuccesso. Tutto questo è all’interno di una funzione loadData()che viene richiamata quando l’utente clicca sul bottone con id=fetch-data
il contenuto del file data.html contiene una semplice tabella
<table border="solid">
<tr>
<th>Autore</th>
<th>Titolo</th>
</tr>
<tr>
<td>Carlos Castaneda</td>
<td>Viaggio ad Ixtlan</td>
</tr>
<tr>
<td>Carlos Castaneda</td>
<td>L'Isola del Tonal</td>
</tr>
</table>
Visualizzare un file JSON
Modifichiamo il file Javascript nel seguente modo
function loadData(){
var content=' ';
$.getJSON('data/books.json')
.done(function(data){
$.each(data.books,function(key,val){
content+='<h3>'+val.title+'</h3>';
content+='<p>'+val.author+'</p>';
});
$('#content').html(content);
});
}
$('#fetch-data').on('click',function(){
loadData();
});
In questo caso utilizziamo il metodo getJSON cui passiamo come parametro il percorso del file JSON sul server.
Nel metodo done creiamo una funzione anonima in cui tramite il metodo each che è un iteratore assegnamo chiave (key) e valore (val) alle rispettive variabili. La struttura del file JSON è la seguente
{
"books": [
{"title":"Viaggio ad Ixtlan","author":"Carlos Castaneda"},
{"title":"L'isola del Tonal","author":"Carlos Castaneda"}
]
}
quindi leggiamo le chiavi title e author di val. data.books (riga 5 nel file js )fa riferimento al fatto che la collezione si chiama books nel file (riga 2 del file JSON)
Ricezione di un file JSON da un script PHP e MySQL
Dumb del mini database per le prove
Script PHP che interroga il database e genera un file JSON
<?php
include '../config/db_connect.php';
$sql="SELECT * FROM articles";
$result=$conn->query($sql);
if($result->num_rows>0){
$i=0;
$data=array();
while($row=$result->fetch_assoc()){
$data[]=$row;
}
echo json_encode($data);
}else{
echo "non ci sono risultati";
}
$conn->close();
File Javascript che lancia la chiamata e visualizza la risposta come contenuto html
function loadData(){
var content=' ';
$.getJSON('src/list-articles.php')
.done(function(data){
$.each(data,function(key,val){
content+='<h3>'+val.title+'</h3>';
content+='<p>'+val.body+'</p>';
});
$('#content').html(content);
});
}
$('#fetch-data').on('click',function(){
loadData();
});
Inviare parametri ad uno script PHP e MySQL e leggere la risposta
In questo caso modifichiamo la pagina web aggiungendo una casella per l’input del parametro che vogliamo inviare al server
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Query - Metodo POST</title>
</head>
<body>
Parole da cercare nel titolo
<input type="text" id="title">
<div id="content">
</div>
<button id="fetch-data">Carica i dati</button>
<script src="js/jquery-3.6.1.js"></script>
<script src="js/post-query.js"></script>
</body>
</html>
Prima di vedere il file Javascript che effettuerà la chiamata riporto lo script PHP che interrogherà il database utilizzando come criterio per la selezione il parametro inviato dal client (la parola che deve essere contenuta nel titolo) che il server memorizzerà nell’array super globale POST: $_POST["title"]
<?php
include '../config/db_connect.php';
$title = $_POST["title"];
$sql="SELECT * FROM articles WHERE title LIKE '%$title%'";
$result=$conn->query($sql);
if($result->num_rows>0){
$i=0;
$data=array();
while($row=$result->fetch_assoc()){
$data[]=$row;
}
echo json_encode($data);
}else{
echo "non ci sono risultati";
}
$conn->close();
Per la chiamata AJAX in questo caso utile il metodo .ajax che utilizza la sintassi chiave valore
function loaddata(){
var url="src/select-articles.php";
var queryString='title='+$('#title').val();
var content='';
$.ajax({
type: "POST",
url: url,
data: queryString,
beforeSend: function(){
$('body').append('<div id="loading">Loading...</div>');
// effetto animato
},
complete: function(){
$('#loading').remove();
// togliere al completamento della richiesta
},
success: function(data){
var obj=jQuery.parseJSON(data);
$.each(obj,function(key,val){
content+='<h3>'+val.title+'</h3>';
content+='<p>'+val.body+'</p>';
});
$('#content').html(content);
},
fail: function(){
$('#content').html('<div>Spiacenti, riprova più tardi</div>');
}
});
}
$('#fetch-data').click(function(){
loaddata();
});
Di seguito la spiegazione di ogni copia chiave-valore dello script
| type | il tipo di invio dati |
| url | il percorso sul server dove è presente lo script o i file (JSON, XML, HTML) |
| data | i parametri da inviare nella forma query string |
| beforeSend | le istruzioni da eseguire prima dell’invio dei dati |
| success | le istruzioni da eseguire in caso di successo |
| complete | cosa fare al completamento della chiamata |
| fail | le istruzioni da eseguire in caso di insuccesso |
