如果設置$ _GET ['submit']，使用AJAX提交到同一頁面並顯示內容

我正在構建一個列出大量文件的應用程序。頁面底部有一個按鈕，顯示「View older」，我想用它來加載舊文件列表。目前它在單擊按鈕時工作正常;它重新加載頁面，並且在設置提交時顯示較舊的頁面。但是，我寧願這樣做，沒有它再次加載。

我該如何使用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的阿賈克斯發揮各地（），但我沒有看到這可以設置$ _GET變量。也許我正在接近這個錯誤的方式？任何幫助，將不勝感激。

感謝

來源

2016-03-31 user3623348

使用jQuery.ajax（）您可以在通話設置的參數「數據」來指定你需要與你的要求發送任何鍵/值對。 –

向我們展示AJAX代碼 – RiggsFolly

因此，目前刷新頁面？爲了讓PHP（如果它在同一個文件中）拿起'$ _GET ['submit']'參數，它會刷新頁面。（afaik）Ajax可以加載內容，但PHP需要位於外部文件中。 – pxgamer

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

來源

2016-03-31 08:48:48 lshas

對於檢索使用Ajax + jQuery的數據，你必須寫下面的代碼：

<html> 
<script type="text/javascript" src="jquery-1.3.2.js"> </script> 

<script type="text/javascript"> 

$(document).ready(function() { 

    $("#display").click(function() {     

     $.ajax({ //create an ajax request to load_page.php 
     type: "GET", 
     url: "display.php",    
     dataType: "html", //expect html to be returned     
     success: function(response){      
      $("#responsecontainer").html(response); 
      //alert(response); 
     } 

    }); 
}); 
}); 

</script> 

<body> 
<h3 align="center">Manage Student Details</h3> 
<table border="1" align="center"> 
    <tr> 
     <td> <input type="button" id="display" value="Display All Data" /> </td> 
    </tr> 
</table> 
<div id="responsecontainer" align="center"> 

</div> 
</body> 
</html>

來源

2016-03-31 08:43:29

你的PHP文件

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

     </ul> 
    </div> 

</div>

Ajax調用

$（ '＃提交'）。在（ '點擊'，功能（E）{

e.preventDefault(); 
var data = 'oldeshots'; 

$.ajax({ 
      type : 'GET', 
      url:'getdata.php', 
      data: data, 
      success:function(data) { 
       $('ul.list-group').html(data); 
      } 
});

}）;

訪問getdata.php

<?php 
    if(isset($_GET['submit'])){ 

     $old_directory = $_GET['data']; 
     $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>'; 
     } 
    } 
?>

來源

2016-03-31 12:27:04

如果設置$ _GET ['submit']，使用AJAX提交到同一頁面並顯示內容

回答

相關問題