在Ajax调用之后更新PHP变量

I am making an Ajax call to a PHP file that checks a condition and runs a query a MySQL query if the conditions are met.

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

The query updates a table in my DB with a new value. This all works great. I would like to know how to show the new value in the current page without having to manually reload. Code is Below.

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

The variable I am updating is $trialExpiry

我正在更新的变量是$ trialExpiry

HTML/PHP

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

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>

Thanks so much.

非常感谢。

3 个解决方案

#1

You don't want to do the live updating with PHP variables, since those are only refreshed when the page is reloaded. Instead, you want to update an element's value via AJAX. As far as I can tell, you want to update the expiration date. If you don't, just let me know and I can change the code to whatever it's supposed to do.

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

Here's the "control flow" of this functionality:

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

(Entry point) User clicks 'Submit', jQuery event handler fires
（入口点）用户点击“提交”，jQuery事件处理程序触发
jQuery AJAX function is called and sends the promo code to a PHP script
调用jQuery AJAX函数并将促销代码发送到PHP脚本
In the PHP script, the database is updated with the promo code.
在PHP脚本中，数据库使用促销代码进行更新。
The PHP script returns the new expiry date (I'll assume that it's in the d/m/Y format you wanted)
PHP脚本返回新的到期日期（我假设它是你想要的d / m / Y格式）
The callback in the jQuery AJAX function receives the data from the script.
jQuery AJAX函数中的回调接收来自脚本的数据。
The callback's function body updates the "Expiry" element on the page with the value from the PHP call.
回调函数体使用PHP调用中的值更新页面上的“Expiry”元素。

Here's how to put that into HTML / JavaScript:

以下是将其放入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>

As you can see, I only added an "id" attribute to the element, a parameter to the "success" property of the AJAX call, and a line of code to update the element.

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

Hope I helped!

希望我帮忙！

#2

You need to add a callback -- IE

你需要添加一个回调 - 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>

#3

Only change the success function like below

只改变如下的成功功能

  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'

#1