如何创建ajax导航答案

【问题标题】：how to create ajax navigation如何创建ajax导航
【发布时间】：2019-02-11 08:18:00
【问题描述】：

对于文件管理，我使用了 var $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") );

【问题讨论】：

标签： php jquery ajax navigation

【解决方案1】：

也许你可以在第一页添加以下脚本

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

你可能会遇到错误，但我试着开始......干杯

【讨论】：

【解决方案2】：

您只能使用 php 来实现；没有页面加载！

将锚点更改为表单。为表单提供一个隐藏的输入字段，其值为：$dir.'/'.$file 将此值写入外部文件，例如：dir.php 下一步：从extern文件中读取值并绑定到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;
}

【讨论】：

很棒的解决方案！