如何创建ajax导航

Question

For a filemanagement, i am using the var $dir that shows me the path to the folders. My url string looks like this: www.example.com/index.php?dir=uploads/folder1

Below is how i grab the path for navigation:

$MainFolderName = 'uploads';
$dir = $MainFolderName;

/* Read actual dir from url */
$actual_link = "http://$_SERVER[HTTP_HOST]$_SERVER[REQUEST_URI]";
$strArr = explode("=",$actual_link);
$CurrentPath = $strArr[1];

// if new folder is created
if(isset($_GET['dir'])) {
$dir = $CurrentPath;
}

To navigate, i use anchors like below:

foreach ($files as $file) {
      .........

if(is_dir($dir.'/'.$file)) {

    $folderanchor = "<a class='folderanchor' href='?dir=".$dir.'/'.$file."'><i class='fas fa-folder'></i>$file</a>";

    echo $folderanchor;

So navigate like this gives always a complete page loading. How can i make this navigation with ajax, so loading dynamically? I know it has something to do with the GET but i dont know how to handle with this...

By the way: for reading all files and directories in a folder is use

// exclude dot, double dot and tmp folder
$files = array_diff( scandir($dir), array(".", "..", "tmp") );

Answer 1

Maybe on page one you could add the following script

<script type="text/javascript">
//on page 1.php
$("body").on('click','a', function(event) {
event.preventDefault();
//Here add script to catch the url
//catching the text
var link= $(this).text;
$.post('anotherpage.php', {url:url}, function(data, textStatus, xhr) {
//Hide the other  div container
$("#con").remove();
//append the new response
$("body").append(data);
});
});
</script>

on anotherpage.php you should put

if(isset($_GET['dir'])) {
$dir = $CurrentPath;
foreach ($files as $file) {
        .........

        if(is_dir($dir.'/'.$file)) {

        $folderanchor = "<a class='folderanchor' href='?dir=".$dir.'/'.$file."'><i class='fas fa-folder'></i>$file</a>";

        echo $folderanchor;
}

You might run into errors but i tried to give a start..... cheers