如何创建ajax导航

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") );

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

You can achieve this with php only; no pageloading!

Change the anchor to a form. Give the form a hidden input field with the value: $dir.'/'.$file Write this value to an extern file, lets say: dir.php Next: read the value from the extern file and bind it to var $dir

Your form instead of anchor:

<form method="post" action="">
    <input type="hidden" name="writedir" value="<?php echo $dir.'/'.$file; ?>" />
    <button type="submit" class="submitanchor" name="submit_dir"><?php echo $file; ?></button>                                              
</form>

Writing to dir.php

if($_POST['writedir']) {

   // write dir to file
   $write_to_dir = fopen("dir.php", "w") or die("Unable to open file!");
   $txt = $_POST['writedir'];
   fwrite($write_to_dir, $txt);
   fclose($write_to_dir);

}

Now read the value from dir.php and bind it to var $dir;

// read dir from file
$readdir = fopen("dir.php", "r") or die("Unable to open file!");
$dir = fread($readdir,filesize("dir.php"));
fclose($readdir);

So what happens: each time you click on submit, it (over)writes the hidden value to dir.php and immediately you read this value and bind it to var $dir If correct, you will see a "smooth" changing of the content without page loading

Extra: style your button as if it looks like an anchor

button.submitanchor {   
   color: #whateveryouwant; 
   border: none;
   cursor: pointer;
   background-color: transparent;
}