php - Ajax 调用后更新 PHP 变量

Question

我正在对 PHP 文件进行 Ajax 调用，该文件检查条件并在满足条件时运行 MySQL 查询。

该查询使用新值更新我的数据库中的表。这一切都很好。我想知道如何在当前页面中显示新值而无需手动重新加载。代码如下。

我正在更新的变量是$TrialExpiry

HTML/PHP

<h4 class="sbText mt-10">Trial End Date: <?php echo date("d/m/Y",
                        strtotime($trialExpiry)); ?></h4>

<form id='promocode'>
     <input type='text' class='sbInput' placeholder='Promo Code' name='promocode'>
     <input type='hidden' name='userid' value='<?php echo $userID; ?>'>
     <button class='btn sbSubmit'>Submit</button>
</form>

JQUERY

   <script>
         $(function () {
             $('#promocode').on('submit', function (e) {
                  e.preventDefault();
                  $.ajax({
                     type: 'post',
                     url: '../model/process-promo-code.php',
                     data: $('#promocode').serialize(),
                     success: function () {
                          $("button.btn").css({
                             'transition-duration': '1000ms',
                              'opacity': '0.5'
                           });
                     }
                 });
            });
      });
   </script>

非常感谢。

Answer 1

您不想使用 PHP 变量进行实时更新，因为这些变量仅在页面重新加载时才会刷新。相反，您希望通过 AJAX 更新元素的值。据我所知，您想更新到期日期。如果您不这样做，请告诉我，我可以将代码更改为它应该执行的任何操作。

这是此功能的“控制流程”:

1. (入口点)用户单击“提交”，触发 jQuery 事件处理程序
2. 调用 jQuery AJAX 函数并将促销代码发送到 PHP 脚本
3. 在 PHP 脚本中，数据库会使用促销代码进行更新。
4. PHP 脚本返回新的到期日期(我假设它采用您想要的 d/m/Y 格式)
5. jQuery AJAX 函数中的回调接收来自脚本的数据。
6. 回调的函数主体使用 PHP 调用的值更新页面上的“Expiry”元素。

以下是将其放入 HTML/JavaScript 中的方法:

<h4 class="sbText mt-10" id="expiry_label">
    Trial End Date: <?php echo date("d/m/Y",
                    strtotime($trialExpiry)); // The initial value can be displayed as normal. ?>
</h4>

<form id='promocode'>
     <input type='text' class='sbInput' placeholder='Promo Code' name='promocode'>
     <input type='hidden' name='userid' value='<?php echo $userID; ?>'>
     <button class='btn sbSubmit'>Submit</button>
</form>

 <script>
     $(function () {
         $('#promocode').on('submit', function (e) {
              e.preventDefault();
              $.ajax({
                 type: 'post',
                 url: '../model/process-promo-code.php',
                 data: $('#promocode').serialize(),
                 success: function (result) {
                      $("button.btn").css({
                         'transition-duration': '1000ms',
                          'opacity': '0.5'
                       });
                       document.getElementById("expiry_label").innerHTML = "Trial End Date: " + result;
                 }
             });
        });
  });
</script>

如您所见，我只向元素添加了一个“id”属性，向 AJAX 调用的“success”属性添加了一个参数，以及一行用于更新元素的代码。

希望我有帮助!