通過ajax在同一個文件中使用PHP填充html表格

我使用PHP在頁面加載時使用隨機數填充HTML table。當單擊button時，我想通過ajax請求調用PHP以重新填充新編號的table。問題是我無法使用（或者至少真的想避免使用）外部文件：必須通過同一個文件中的ajax請求調用PHP。通過ajax在同一個文件中使用PHP填充html表格

文件是index.php幷包含以下簡化PHP代碼：

<?php 
    //code to be executed via ajax call should be placed here ? 
?> 
<!DOCTYPE html> 

<HTML> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width"> 
<HEAD> 
    <title>PHP test</title> 
</HEAD> 

<BODY> 
    <table id="table"> 
    <?php //problem : only works once in page load 
     $howMany = 10; 

     $values = array(); 

     echo '<tr>'; 
     for ($v = 0; $v < $howMany; $v++) { 
     $values[$v] = mt_rand(-10, 10); 
     echo '<td>'. $values[$v] .'</td>'; 
     } 
     echo '</tr>'; 
    ?> 
    </table> 

    <button id="btn">Generate new numbers</button> 
<BODY>

這是我目前的Ajax請求：

<script type="text/javascript"> 
function send_ajax() { 
    console.log('btn clicked'); 
    if (window.XMLHttpRequest) { 
    xmlhttp = new XMLHttpRequest(); //code for IE7+, Firefox, Chrome, Opera, Safari 
    } 
    else { 
    xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //code for IE6, IE5 
    } 
    xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     console.log('data sent'); 
    } 
    } 
    xmlhttp.open('POST', 'index.php', true); 
    //xmlhttp.send(document.getElementById('input').value); 
} 

document.getElementById('btn').addEventListener('click', send_ajax, false); 
</script>

我敢肯定，我失去了一些東西很明顯，但我沒有想法如何我應該適應我的php代碼和ajax請求重新填充table當在同一個文件中接收ajax調用。（注意：我知道使用外部文件會很容易，但這種情況是我需要用ajax和PHP處理數十個不同文件中更復雜任務的典型例子）。

來源

2017-03-31 Hal_9100

爲什麼你不使頁面加載空表，然後初始化填充此表的ajax請求？ – Hossam

如何這樣的事情...

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

      $howMany = 10; 

      $values = array(); 

      echo '<tr>'; 
      for ($v = 0; $v < $howMany; $v++) { 
      $values[$v] = mt_rand(-10, 10); 
      echo '<td>'. $values[$v] .'</td>'; 
      } 
      echo '</tr>';  

    } else { 
?> 
<!DOCTYPE html> 

<HTML> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width"> 
<HEAD> 
    <title>PHP test</title> 
</HEAD> 

<BODY> 
    <table id="table"> 
    <?php //problem : only works once in page load 
     $howMany = 10; 

     $values = array(); 

     echo '<tr>'; 
     for ($v = 0; $v < $howMany; $v++) { 
     $values[$v] = mt_rand(-10, 10); 
     echo '<td>'. $values[$v] .'</td>'; 
     } 
     echo '</tr>'; 
    ?> 
    </table> 

    <button id="btn">Generate new numbers</button> 
</BODY> 
<?php } ?>

然後......

xmlhttp.open('GET', 'index.php?load=1', true);

這肯定可以得到改善，但我已經介紹的概念是如何將我接近你挑戰。

來源

2017-03-31 20:37:06 Chris

剛剛得到您的解決方案工作。在不同的配置下使用你的想法教會了我很多關於ajax和php如何溝通和協作的知識。謝謝 –

太好了。做得好。祝你旅途順利... – Chris

您可以檢查isset（$ _ POST [ '變量']）以JSON格式，並返回數據

如

<?php 
    //code to be executed via ajax call 
    if(isset($_POST['query']) && $_POST['query'] != "") 
    { 
     return json_encode(mt_rand(-10, 10)); 
    } 
?> 
<!DOCTYPE html> 

<HTML> 
    <meta charset="utf-8" /> 
    <meta name="viewport" content="width=device-width"> 
<HEAD> 
    <title>PHP test</title> 
</HEAD> 

<BODY> 
    <table id="table"> 
    <?php //problem : only works once in page load 
     $howMany = 10; 

     $values = array(); 

     echo '<tr>'; 
     for ($v = 0; $v < $howMany; $v++) { 
     $values[$v] = mt_rand(-10, 10); 
     echo '<td>'. $values[$v] .'</td>'; 
     } 
     echo '</tr>'; 
    ?> 
    </table> 

    <button id="btn">Generate new numbers</button> 
<BODY>

//這裏是Ajax代碼

<script type="text/javascript"> 

    function send_ajax() { 
     console.log('btn clicked'); 
     if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); //code for IE7+, Firefox, Chrome, Opera, Safari 
     } 
     else { 
     xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); //code for IE6, IE5 
     } 
     xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      console.log('data sent'); 
     } 
     } 
     xmlhttp.open('POST', 'index.php', true); 
     var data = new FormData(); 
     data.append('query',document.getElementById('input').value); 
     //you can append more data in same manner for sending more data 
     xmlhttp.send(data); 
    } 

    document.getElementById('btn').addEventListener('click', send_ajax, false); 
    </script>

來源

2017-03-31 20:39:30 Sudhakar

希望你得到的邏輯，而不是返回一個值，你可以通過使用json_encode函數返回任何東西 – Sudhakar

謝謝！我得到了json_encode背後的邏輯，但我無法獲得ajax調用來觸發你的PHP if條件（儘管ajax調用本身正在工作）。我想我的問題是要真正理解ajax調用背後的邏輯。 –

@ Hal_9100，我已經更新了答案，希望你能得到它 – Sudhakar

通過ajax在同一個文件中使用PHP填充html表格

回答

相關問題