php - 如果设置了 $_GET ['submit' ]，则使用 AJAX 提交到同一页面并显示内容

Question

我正在构建一个列出许多文件的应用程序。页面底部有一个按钮，上面写着“查看旧文件”，我想用它来加载旧文件列表。目前，单击按钮时效果良好；它重新加载页面，并在设置提交后显示较旧的页面。但是，我宁愿在不再次加载的情况下执行此操作。

我如何使用 AJAX 来做到这一点？这是我到目前为止所拥有的:

<div class="row">
    <div class="col-xs-12">
        <form method="GET">
            <input type="submit" name="submit" value="View Older" id="submit" />
        </form>
    </div>

    <div class="col-xs-12 listholder">
        <ul class="list-group">
            <?php
            if( isset($_GET['submit']) ){ 
                $old_directory = 'oldeshots';
                $scanned_old = array_diff(scandir($old_directory), array('..', '.'));

                foreach ($scanned_old as $key => $value) {
                    echo '<li class="list-group-item">';
                    echo "<a href='$value?old=true'>$value</a>";
                    echo '</li>';
                }
            } ?>
        </ul>                    
    </div>

</div>

到目前为止的 AJAX 代码(目前还没有太多内容!):

$('#submit').on('click', function(e){

e.preventDefault();

$.ajax( {
      url:'index.php',
      data: , //What goes here?
      success:function(data) {
      //What goes here?
      }
    });

});

我已经尝试过 jQuery .ajax() 但我不明白它如何设置 $_GET 变量。也许我以错误的方式处理这个问题？任何帮助将不胜感激。

谢谢

Answer 1

getfiles.php:

<?php 
$old_directory = 'oldeshots';
$scanned_old = array_diff(scandir($old_directory), array('..', '.'));
echo json_encode($scanned_old);

ajax代码:

$('#submit').on('click', function(e){
    e.preventDefault();
    $.ajax({
        url:'getfiles.php',
        data: {myvar1: 'value', myvar2: 'value2'}, // You don't need this in this case. But this is how you use it.
        dataType: 'json',
        success:function(data) {
            $.each(data, function(i,value){
                $(".list-group").append('<li class="list-group-item"><a href="'+ value +'?old=true">'+value+'</a></li>');
            });
        }
    });
});