Non conosco tutorial chiari e concisi sull'argomento.
Partendo dal codice che hai mostrato: la stessa pagina gestisce sia le interrogazioni alla base di dati che la loro presentazione. Aggiornamento dei dati (interrogazioni) e pagina (presentazione) coincidono: per come stanno le cose ora, aggiornare i dati implica ricaricare la pagina intera.
L'idea è separare il recupero dei dati dalla loro presentazione.
Premessa: Non ho modo di provare il codice e non escludo che ci siano errori di sintassi o simili.
Interrogare il database: players.php
Occorre creare una pagina separata (players.php) il cui scopo è produrre in output i dati, in un certo formato, ad esempio JSON:
Codice PHP:
include ("connection.php");
$players = array();
$position = 1;
// Selects identifiers and number of goals of players
$sql = 'SELECT * FROM 1516_marcatori ORDER BY gol DESC';
$result = mysqli_query($conn, $sql);
// For each player, selects its name and create an entry in array "players"
while ($row = mysqli_fetch_assoc($result)) {
$sql = 'SELECT calciatore FROM 1516_listone WHERE id_gio = "' . $row['player'] . '"';
$player_result = mysqli_query($conn, $sql);
// Skips this player if query produced an empty set
if (mysqli_num_rows($player_result) <= 0) {
continue;
}
$player = mysql_fetch_assoc($player_result);
$players[] = array(
"position" => $position++;
"name" => $player['calciatore'];
"goals" => $row['gol'];
);
}
mysqli_close($conn);
// Returns data in JSON format
header('Content-Type: application/json');
echo json_encode($players);
Il vettore $players alla fine ha una struttura di questo tipo:
Codice PHP:
$players = [
["position" => 1, "name" => "HIGUAIN", "goals" => 19],
["position" => 2, "name" => "DYBALA", "goals" => 8],
...
["position" => 5, "name" => "BACCA", "goals" => 6]
];
Nota: Ad occhio mi sembra sia possibile ottenere tutti i dati con un'unica interrogazione anziché effettuarne una per ogni giocatore, ma non conoscendo la struttura della base di dati non mi sbilancio.
Recuperare e mostrare i dati: index.php
Ora la pagina index.php ha bisogno di recuperare i dati dalla pagina appena creata. Puoi farlo con jQuery.get():
Codice HTML:
<html>
<head>
...
<!-- Includes jQuery -->
<script src="jquery-1.12.2.min.js"></script>
...
<script>
/**
* Updates players' data.
* Assumes a table with id "players".
*/
function display_players(players) {
// Creates every row of the table (just an example, there are indeed cleaner ways...)
var html = $.map(players, function (player, i) {
return "<tr><td>" + player.position + "</td><td>" + player.name + "</td><td>" + player.goals + "</td></tr>";
}).join("");
// Removes old data and add updated one
$("#players tr").remove();
$("#players").append(html);
}
/**
* Performs a GET request to obtain (and display) players' data.
*/
function update_players() {
$.get( "players.php", display_players);
}
</script>
</head>
<body>
...
<table id="players">
</table>
...
</body>
</html>
Naturalmente devi occuparti di rendere disponibile jQuery, scaricando il file JavaScript od usando un CDN.
A questo punto hai a disposizione la funzione update_players che, quando chiamata, aggiorna la sola tabella senza ricaricare la pagina. Puoi creare un pulsante "aggiorna":
Codice HTML:
<button onclick="update_players()">Aggiorna</button>
Oppure usare setInterval, in modo che l'aggiornamento sia eseguito ogni intervallo fissato di millisecondi:
Codice:
setInterval(update_players, 5000);