javascript - 在同一文件中通过ajax使用PHP填充html表

标签 javascript php ajax

我正在使用 PHP 在页面加载时使用随机数填充 HTML 。单击 button 时,我想通过 ajax 请求调用 PHP,用新数字重新填充 table。问题是我无法使用(或者至少真的想避免使用)外部文件:PHP 必须通过同一文件中的 ajax 请求调用。

文件是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>

我确信我错过了一些明显的东西,但我不知道在同一文件中接收 ajax 调用时应该如何调整我的 php 代码和 ajax 请求以重新填充

(注意:我知道使用外部文件会非常容易,但这种情况是我需要使用 ajax 和 PHP 来完成数十个不同文件的更复杂任务的典型示例)。

最佳答案

像这样的怎么样......

<?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);

这绝对可以改进,但我概述的概念是我将如何应对您的挑战。

关于javascript - 在同一文件中通过ajax使用PHP填充html表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43149227/

相关文章:

javascript - 我怎样才能将这个递归 javascript 输出到控制台以外的任何地方

javascript - 如何从 FHIR 服务器快速提取所有搜索结果

javascript - 循环遍历嵌套对象

php - Windows : #1045 - Access denied for user 'root' @'localhost' (using password: YES) phpmyadmin

javascript - 停止执行一些 JavaScript 代码

javascript - AngularJS:我应该使用过滤器将整数值转换为百分比吗?

php - 图片已上传,但我看不到它们

php - 如何在 codeigniter 中的用户之间分配总资金

Javascript:从 JSON 获取数据

javascript - Ajax - 下载前获取文件大小