通过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表格

回答

相关问题