如何使用 ajax 刷新包含 PHP 查询的多个 div答案

【问题标题】：How to refresh multiple divs containing PHP queries using ajax如何使用 ajax 刷新包含 PHP 查询的多个 div
【发布时间】：2019-05-13 20:36:24
【问题描述】：

我已经构建了一个日历约会脚本，并希望在谷歌地图和下表中显示任何给定日期的结果，而无需刷新整个页面。目前，使用 ajax，地图会完美刷新，但表格不会。

当在日历中单击日期时，它会通过 javascript 写入隐藏的表单字段，然后当单击更新按钮（提交）时，头部中的 ajax 在后台提交表单以覆盖 $updatedate 变量，刷新地图 div 和表格 div。

当前变量在会话中更新，脚本运行以更新 xml 文件，日历成功刷新显示此 xml 数据。但是表 div 不会刷新。如果我手动刷新整个页面，新结果会成功显示，因此它会获取更新的变量，但不会通过 ajax 刷新。

我意识到这可能是由于 ajax 是客户端和 php 服务器端，所以没有运行 php 查询，但我也尝试在 div 中使用 file_get_contents（适用于 xml 生成脚本）来运行这些查询没有加载整个页面，但这只是什么都没有显示，所以我认为我错过了一些基本的东西，可能非常简单！

--------- ajax in head to run update script and reload divs --------

<!-- silently submit the updatedate form to update the session variable.
Then reload the map and table divs using this new variable -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
  $(function () {
    $('#update').on('submit', function (e) {
      // stop the page from reloading
      e.preventDefault();
      // but submit the form
      $.ajax({
        type: 'post',
        url: 'actions/updatedate.php',
        data: $('#update').serialize(),
        success: function () {
          $("#map-outer").load("../map.php");
          $("#tbl-outer").load("../table.php");
        }
      });
    });
  });
</script> 


--------- main page --------

<div>calendar content here</div>

<div>customer details form here</div>

<div class="clear" style="text-align: left;">
    <!-- set default then let script overwrite -->
    <?php $updatedate = date('Y-m-d'); ?>
    <!-- run form (via ajax in head) to update variable and write to session -->
    <form id="update" method="post">
        <input type="hidden" name="updatedate" id="updatedate" />
        <input type="submit" name="submit" value="update map and table" />
    </form>
    <!-- update variable form session -->
    <?php $updatedate = $_SESSION['updatedate']; ?>
    <br />
</div>

<div id="map-outer" class="twocol1">
    <?php include "../map.php" ?>  <!-- this page runs a script to pull the db values and write them to xml, then displays google map code -->
    <br /><br />
</div>

<div id="tbl-outer" class="twocol2">
    <?php include "../table.php" ?> <!-- this page pulls the db values and display them in a table -->
</div>



--------- map.php page --------

<?php
// silently run the db to xml script before loading the map //
file_get_contents("admin/actions/dbtoxml.php");
?>

<div id="map"></div>
<script> .....  script to show google map with custom markers .....  </script>



--------- table.php page --------

<h2>Morning</h2>

<?php
    $sql = "SELECT * FROM wasps_appointments WHERE date = '$updatedate' AND time = 'Morning' AND block = 0 AND completed = 0 ORDER BY date ASC";
    $result = $connection->query($sql);
?>
<?php include 'admin/includes/view-table-today.php'; ?>

<br /><br />

<h2>Afternoon</h2>

<?php
    $sql = "SELECT * FROM wasps_appointments WHERE date = '$updatedate' AND time = 'Afternoon' AND block = 0 AND completed = 0 ORDER BY date ASC";
    $result = $connection->query($sql);
?>
<?php include 'admin/includes/view-table-today.php'; ?>

谁能指出我正确的方向？

非常感谢，海伦

【问题讨论】：

标签： javascript php ajax

【解决方案1】：

我现在已经解决了这个问题。 table.php 页面没有使用现有的 mysql 数据库连接加载，所以我不得不使用另一个。

谁能告诉我使用之间的区别 $connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME); 和 $connection = mysqli_connect(DB_HOST, DB_USER, DB_PASS); $db_selected = mysqli_select_db($connection, DB_NAME);

【讨论】：