как создать AJAX навигацию

Question

Для управления файлами я использую переменную $dir, которая показывает мне путь к папкам.Моя строка URL выглядит следующим образом: www.example.com/index.php?dir=uploads/folder1

Ниже показано, как я беру путь для навигации:

$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;
}

Для навигации я использую якоря, как показано ниже:

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;

Так что навигация, как эта, всегда дает полную загрузку страницы.Как я могу сделать эту навигацию с AJAX, чтобы загружаться динамически?Я знаю, что это как-то связано с GET, но я не знаю, как справиться с этим ...

Кстати: для чтения всех файлов и каталогов в папке используйте

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

Answer 1

Вы можете достичь этого только с помощью php;нет загрузки страницы!

Измените привязку к форме.Дайте форме скрытое поле ввода со значением: $dir.'/'.$file Запишите это значение во внешний файл, скажем: dir.php Далее: прочитайте значение из внешнего файла и свяжите его с var $dir

Ваша форма вместо якоря:

<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>

Запись в 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);

}

Теперь прочитайте значение из dir.php и привяжите его к 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);

Итак, что происходит: каждый раз, когда вы нажимаете на кнопку отправить, он (перезаписывает) записывает скрытое значение в dir.php, и сразу же вы читаете это значение и привязываете его к var $dir Если все правильно, вы увидите«плавное» изменение содержимого без загрузки страницы

Дополнительно: стилизуйте свою кнопку так, как будто она выглядит как якорь

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

Answer 2

Может быть, на первой странице вы можете добавить следующий скрипт

<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>

на anotherpage.php, вы должны поставить

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;
}

Возможно, вы столкнетесь с ошибками, но я попытался дать старт..... ура