Ajax、Jquery、PHPはページを更新せずにクリックでファイルリストを取得します

Question

まず、これが他の場所にある場合は謝罪したいと思います。私は単純なものを探しています。私はglobを使ってディレクトリからファイルのリストを取得するPHPスクリプトを持っています。ディレクトリは、アドレスバーを介して送信された要求によって決定されます。すなわち、 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があることを知っています。私はこの前にこれをやったと誓っていたかもしれませんが、私の人生のために、私はちょうどそれの周りに私の頭を包むように見えません。ボタンをクリックするだけで何か簡単なことが分かり、結果をdivに書き込むことができます。どのような助けも私が逃した答えへのリンクや評価されるでしょう。おかげさまで

私は何をしようとしているのかを明確にしようと、これを1-28-2017で編集しています。 上記の現在のPHPコードを使用します。この.phpページにアクセスすると、フォルダ内のサブフォルダのリストが生成され、そのリストがクリック可能なリンクに変わります。これらのサブフォルダのそれぞれには、メディアファイルのグループがあります。現在、現在生成されているサブフォルダリンクの1つをクリックした場合。ページ全体がリフレッシュされ、そのサブフォルダ内のすべてのファイルが表示されます。これは、php getとURL内の変数を使用して行います。私が変更しようとしている唯一のことは、ページをリフレッシュせずに同じ結果が得られることです。この機能の例を現在のように見たい場合は、私のテストページに行くことができます。 http://testbed.myreth024.tk/ajax/私はそれがjquery.getで簡単なものだと考え続けています。私は、これらのURLパラメータをどのように通すべきかの良い例を見つけることができないようです。とにかく。すべての回答に感謝します。私はそれが歓声を役に立てば幸いscript.php

<?php 
echo "You win"; 
?> 

で

Answer 1

時間と入力のために皆様に感謝したいと思います。私は、プログラマーとして私たちは物事を複雑にする傾向があると感じていることを指摘したいと思います。結局私はこの問題の解決策に着きました。それは私が持つことができるほど明確に質問しなかったことは完全に可能です。私がコードを投稿する前に、何が起こるのかの基本を歩みましょう。うまくいけば、これは同様の解決策を探している他の誰かを助けるでしょう。 インデックスページが開き、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> 

それから私は、ファイル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から "data"を取り出し、その "data"をjquery .htmlを使ってdivに書き込むことでした。それは単純な.getコマンドであった。私がそれを理解すれば、jquery ajaxの解決法である。誰かが質問をよりよくする方法やコードを改善する方法について質問やコメントがある場合は、私に知らせてください。私はまだこれのいくつかを学んでおり、私は常に改善のために開いています。

Answer 2

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

！