在网页中加载动态 PHP 回显而不重新加载页面

Question

我有 PHP 代码，我在其中得到回显作为我的 postgres 数据库表字段我想在我的基于 html 和 JavaScript 的 Web 应用程序中显示这些字段。现在我可以将它们加载到我的网页中，但我必须重新加载网页获取新更新的值。我想在文本框中自动获取它们而不重新加载应用程序。我读到 ajax 请求会很有帮助 给出的是我使用 html 来显示案例记录的 php 代码，但我每次都必须重新加载页面才能更新它

<?php
   $host        = "host = localhost";
   $port        = "port = 5432";
   $dbname      = "dbname = geoserver";
   $credentials = "user = postgres password=password";

   $db = pg_connect( "$host $port $dbname $credentials"  );

   $sql =<<<EOF
      SELECT * from audit.logged_actions
      ORDER BY action_tstamp_tx DESC 
      LIMIT 5;

EOF;

   $ret = pg_query($db, $sql);
   if(!$ret) {
      echo pg_last_error($db);
      exit;
   } 
   while($row = pg_fetch_row($ret)) {
     // echo "e = ". $row[1] . "\n";  

     echo "<input type='text' value='$row[14] '/>"; 


      echo "<input type='text' value='$row[13] '/>";
   }
   echo "Operation done successfully\n";
   pg_close($db);
?>

Answer 1

问题是在你的浏览器渲染你的 php 脚本的输出后，它不再连接到你的 php 了。这就是 HTTP 的工作原理。

为了能够在不刷新整个页面的情况下显示输出，您需要使用 javascript 向您的 PHP 脚本发出另一个 HTTP 请求。

类似这样的：

<?php
$host        = "host = localhost";
$port        = "port = 5432";
$dbname      = "dbname = geoserver";
$credentials = "user = postgres password=password";

$db = pg_connect( "$host $port $dbname $credentials"  );

$sql =<<<EOF
    SELECT * from audit.logged_actions
    ORDER BY action_tstamp_tx DESC 
    LIMIT 5;

EOF;

$ret = pg_query($db, $sql);
if(!$ret) {
  echo pg_last_error($db);
  exit;
} 
?>
<div id='content'>
  <?php while($row = pg_fetch_row($ret)) { ?>
    <input type='text' value='<?= $row[14] ?>'/> 
    <input type='text' value='<?= $row[13] ?>'/>
  <?php } ?>

  Operation done successfully

  <script>
    (function() {
      const secondsToRefresh = 5;
      const Http = new XMLHttpRequest();
      const url='#YOUR_PHP_SCRIPT_URL#';
      setTimeout(function() {
        Http.open("GET", url);
        Http.send();
      }, secondsToRefresh * 1000);
      Http.onreadystatechange=(e)=>{
        document.getElementById('data').innerHTML = Http.responseText;
      }
    })()
  </script>
</div>";