Ajaxコール後のPHP変数の更新

Question

条件を満たしているかどうかを確認し、条件が満たされている場合は、MySQLクエリを実行するPHPファイルへのAjax呼び出しを行っています。

クエリは、新しい値で自分のDB内のテーブルを更新します。これはすべて素晴らしいです。手動でリロードせずに、現在のページに新しい値を表示する方法を知りたいです。コードは以下の通りです。

私が更新してい変数が$ 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の変数でライブアップデートを行うにはしたくない

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' 

Answer 3

のみ成功機能を変更しますページがリロードされたときにのみリフレッシュされます。代わりに、AJAXを介して要素の値を更新したいとします。私が知る限り、有効期限を更新する必要があります。あなたがしなければ、私に知らせてください、そして、私はそれがするべきであるものにコードを変更することができます。ここで

は、この機能の「制御フロー」です：

1. （エントリポイント）ユーザーは、「送信」をクリック、jQueryのイベントハンドラが起動
2. jQueryのAJAX機能が呼び出され、PHPにプロモーションコードを送信していますスクリプト
3. PHPスクリプトでは、データベースがプロモーションコードで更新されます。
4. PHPスクリプトは新しい有効期限を返します（希望するd/m/Y形式になっていると仮定します）
5. jQuery AJAX関数のコールバックはスクリプトからデータを受け取ります。
6. コールバックの関数本体は、ページ上の "Expiry"要素をPHP呼び出しの値で更新します。

ここでは、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呼び出し、および要素を更新するコード行。

私は助けました！