Ajax,Jquery,PHP在点击时发送获取文件列表而不刷新页面

时间:2017-01-24 17:53:17

标签: php jquery ajax

首先,如果这是其他地方,我想道歉。我正在寻找一些简单的东西。我有一个PHP脚本,它使用glob从目录中检索文件列表。该目录由通过地址栏发送的请求确定。即。 http://somewebsite.com/?loc=mydirectory 我正在寻找一种方法来创建一个可以单击的按钮,文件列表将显示而不刷新页面。 这是PHP代码。

<?php
$BaseLoc='./';
$SecLoc='archives';
$FullLoc=$BaseLoc.$SecLoc.'/';
$loc=$_GET["loc"];
parse_str($_SERVER['QUERY_STRING'], $urlparams);
$GFloc=$urlparams['loc'];

function DirList() {
  global $FullLoc;
      $DirList=glob($FullLoc.'*',GLOB_ONLYDIR);

  foreach ($DirList as $dirlist) {
    $edl=explode ('/',$dirlist);
    $dirlist=end($edl);
    echo '<li><a href="?loc='.$dirlist.'">'.$dirlist.'</a></li>';
  }
}

function ListFiles($GFloc){
   global $FullLoc,$GFloc;
   $FileLoc=$FullLoc.$GFloc;
   $FileList=glob($FileLoc.'/*');
   foreach ($FileList as $filelist) {
     echo $filelist.' - '.$GFloc.'<br />';
   }
}
?>

请记住,这是一个测试项目,目的是掌握如何处理这种类型的AJAX。我知道有一些Jquery和.get我可以发誓我以前做过这件事,但对于我的生活我似乎无法绕过它。我知道只需按一下按钮就可以实现简单的操作,然后将结果写入div。任何帮助将不胜感激,甚至链接到我错过的答案。 谢谢。

我正在编辑1-28-2017,试图澄清我正在尝试做什么。 用上面的PHP代码。当访问此.php页面时,它会生成文件夹中的子文件夹列表,并将该列表转换为可单击的链接。每个子文件夹中都有一组媒体文件。目前,如果我点击其中一个现在生成的子文件夹链接。整个页面刷新,我得到该子文件夹内所有文件的显示。这是通过在URL中使用php get和变量来完成的。我唯一要改变的是,我得到了相同的结果,没有刷新页面。如果您想查看当前的此功能示例,可以转到我的测试页面。 http://testbed.myreth024.tk/ajax/我一直认为jquery .get是简单的。我似乎无法找到如何传递这些url参数的好例子。无论如何。再次感谢所有回复。

2 个答案:

答案 0 :(得分:0)

<button type="button">Click Me</button>
<div id="iamdiv"></div>
<script type="text/javascript">
    $(document).ready(function(){
        $("button").click(function(){ //you can use class(with .yourclass) or id(with #yourid) instead of button if you need to be.

            $.ajax({
                type: 'POST',
                url: 'script.php',
                success: function(data) {
                    alert(data);
                    $("#iamdiv").html(data);

                }
            });
   });
});
</script>

在script.php中

<?php 
 echo "You win";
?>

我希望这有助于欢呼!

答案 1 :(得分:0)

我要感谢大家的时间和投入。我想指出,我觉得作为程序员,我们倾向于使事情过于复杂。最终我找到了解决这个问题的方法。完全有可能我没有尽可能清楚地问这个问题。在我发布代码之前,让我逐步了解发生的事情的基础知识。希望这将有助于寻找类似解决方案的其他人。 索引页面打开,php代码执行并生成目录列表。每个目录名称都可以通过javascript进行查看。单击目录时,目录列表下方的空间将显示该目录中的文件列表。 这是索引文件:

        <style>.menu{cursor:pointer;padding:1%;float:left;}</style>
            <?php 
            $loc=$_GET["loc"];
            function DirList() {
            global $loc;
            $dlist=glob("./files/*",GLOB_ONLYDIR); 
            $dend=$dlist[0]; 
            $dende=explode ('/',$dend); 
            $default=end($dende);
                foreach ($dlist as $Dlist) {
                    $edl=explode ('/',$Dlist);
                    $DList=end($edl);
            echo '<div class="menu" id="'.$DList.'">'.$DList.'</div> ';
                    }
                    if(!$loc){header("Location: ?loc=".$default);}

                }

            ?>
            <p></p>
            <div><?php DirList();?></div>
            <div><div id="flist" style="clear:both;border:1px solid black;min-height:25px;"></div></div>
            <p></p>
            <script type="text/javascript">
            $(".menu").click(function() {
                var dloc=this.id;
            $.get("file-list.php?loc="+dloc,function(data) {
                $("#flist").html(data);
            });
            });
            </script>

然后我有一个file-list.php来生成文件列表。

            <?php
            function FileList() {
            $loc=$_GET["loc"];
            $dloc = "./files/".$loc.'/';
            $flist=glob($dloc.'*');
            foreach ($flist as $fList)
                {
            $efl=explode ('/',$fList);
            $FList=end($efl);
echo '<div style="padding:1%;width:45%;margin:0px auto;">'.$FList.'</div>'; 
                }
            }
            FileList();
            ?>

最终我缺少的是如何获取数据并将其放入div中。在创建链接时,我使用css id来存储目录名。这使我能够在代码中更容易地引用它。最终它主要是从file-list.php中检索“数据”,然后简单地用jquery .html将“数据”写入div。它最终成为一个简单的.get命令,如果我理解它,它是一个jquery ajax解决方案。如果有人对我如何更好地提出问题或改进代码的方法有任何疑问或意见,请随时告诉我。我还在学习其中一些,我总是乐于改进。