Creare un listato di directory con AJAX e jQuery richiede l'utilizzo di uno script lato server che, ricevuto il nome della directory di cui visualizzare i contenuti tramite una richiesta GET, restituisca un output HTML. Vediamone insieme i dettagli.
Partiamo da questa struttura HTML:
<p>
<a href="ajax-listing.php?dir=nome-directory" id="view">View listing</a>
</p>
<div id="listing"></div>
L'URL della richiesta è già formato per motivi di accessibilità. Infatti qualora JavaScript fosse disabilitato, l'utente potrebbe sempre visualizzare la pagina HTML creata dallo script lato server.
Quindi creiamo il nostro script in PHP:
<?php
header('Content-Type: text/html');
$dir = $_GET['dir'];
$start = '';
if(preg_match('/^[a-z0-9-_]+$/', $dir)) {
$start = $dir;
} else {
echo '<p>Error</p>' . "\n";
exit();
}
function directoryIteratorToArray(DirectoryIterator $it)
{
$result = array();
foreach ($it as $key => $child) {
if ($child->isDot()) {
continue;
}
$name = $child->getBasename();
if ($child->isDir()) {
$js = strpos($name, 'js');
if($js === false) {
$subit = new DirectoryIterator($child->getPathname());
$result[$name] = directoryIteratorToArray($subit);
}
} else {
if(!preg_match('/^\./', $name)) {
$result[] = $name;
}
}
}
return $result;
}
$files = directoryIteratorToArray(new DirectoryIterator($start));
$html = '<ul>' . "\n";
$base = 'http://' . $_SERVER['HTTP_HOST'] . '/esempi/corso-jquery/';
foreach($files as $dir => $contents) {
$html .= '<li>/' . $dir . '/';
$html .= '<ul>';
foreach($contents as $file) {
$html .= '<li><a href="' . $base . $dir . '/' . $file . '">' . $file . '</a></li>';
}
$html .= '</ul>';
$html .= '</li>';
}
$html .= '</ul>';
echo $html;
?>
Alcuni parametri dello script, come l'URL di base e la directory madre vanno ovviamente modificati per adattarsi alle vostre esigenze. Con jQuery non dobbiamo fare altro che associare una richiesta AJAX al link di partenza:
$(function() {
$('#view').click(function(event) {
event.preventDefault();
var $a = $(this);
var href = $a.attr('href');
var query = href.substring(href.indexOf('?'), href.length);
$.ajax({
url: href,
dataType: 'html',
type: 'GET',
data: query,
success: function(html) {
$('#listing').html(html);
}
});
});
});
Potete visionare il risultato finale nel video seguente.