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

您需要添加回调 - IE

 <script>
         $(function () {
             $('#promocode').on('submit', function (e) {
                  e.preventDefault();
                  $.ajax({
                     type: 'post',
                     url: '../model/process-promo-code.php',
                     data: $('#promocode').serialize(),
                     success: function (data) {  //<----  CALLBACK


                             alert(data); // data contains the return from the ajax call

                          $("button.btn").css({
                             'transition-duration': '1000ms',
                              'opacity': '0.5'
                           });
                     }
                 });
            });
      });
   </script>

Answer 2

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

以下是此功能的“控制流程”：

（入口点）用户点击“提交”，jQuery事件处理程序触发
调用jQuery AJAX函数并将促销代码发送到PHP脚本
在PHP脚本中，使用促销代码更新数据库。
PHP脚本返回新的到期日期（我假设它是你想要的d / m / Y格式）
jQuery AJAX函数中的回调接收来自脚本的数据。
回调函数体使用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”属性的参数以及更新元素的代码行。

希望我帮忙！

Answer 3

仅更改成功功能，如下所示

  success: function (data) {  //<----  CALLBACK


                             $('input["name='userid' "]').val(data); // data contains the return from the ajax call

                          $("button.btn").css({
                             'transition-duration': '1000ms',
                              'opacity': '0.5'

在Ajax调用之后更新PHP变量

3 个答案: