Загрузка динамического эхо PHP на веб-странице без перезагрузки страницы

Question

У меня есть PHP-код, в котором я получаю эхо как поля таблицы моей базы данных postgres. Я хочу отобразить эти поля в своем веб-приложении на основе HTML и JavaScript. Сейчас я могу загрузить их на свою веб-страницу, но мне нужно перезагрузить веб-страницу, чтобыполучить новые обновленные значения.Я хочу получить их автоматически в текстовом поле без перезагрузки приложения. Я прочитал, что ajax-запрос был бы полезен, учитывая, что php-код я использую с html для отображения записей случаев, но мне приходится каждый раз перезагружать страницу, чтобы обновлять ее

<?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, чтобы сделать еще один HTTP-запрос к вашему 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;
} 
?>
<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>";