A working example

Use this in your HTML
  //----- DO THE AJAX BACKGROUND CHECK -----
  //Ajax call is handled in: functions.php
  $AjaxUrlHtml = "var ajaxurl = '" . admin_url('admin-ajax.php') . "';";
  $AjaxNonce = wp_create_nonce( 'my-nonce-special-string' );               //<<<<DELETE LINE IF USING FOR NON LOGGED IN USERS!
  
  $MyField1Value = "Test string";
  
  $MaxPageAgeMs = (60 * 1000);
    
  $HtmlOutput .= <<<_END
  <script>
    $AjaxUrlHtml

    const PAGE_ACTIVE_DO_AJAX_CHECK_EVERY_SECS = 3;   //<<<How often to fire an ajax check
    
    var DoAjaxCheckEverySecs = PAGE_ACTIVE_DO_AJAX_CHECK_EVERY_SECS;
    var DoAjaxCheckEveryCounter = 0;
    var NumOfChecksCounter = 0;
    var PageFirstLoaded = new Date().getTime();
    
    var MyField2Value = 123;  //<< A JS variable you can pass example

    //----- DO AJAX CALL -----
    setInterval(function()
    {
      //Here every 1000mS      
      DoAjaxCheckEveryCounter++;
      if (DoAjaxCheckEveryCounter >= DoAjaxCheckEverySecs)
      {
        DoAjaxCheckEveryCounter = 0;
        
        var post_data = {
                   'action': 'my_test_page_ajax_action_callback',   //<<The name of the ajax callback action in functions.php
                   'security': '$AjaxNonce',                        //<<<<DELETE LINE IF USING FOR NON LOGGED IN USERS!
                   'MyRequestField1': '$MyField1Value',
                   'MyRequestField2': MyField2Value
        };
        jQuery.post(ajaxurl, post_data, function(response) {
          //----- CALLBACK SUCCESS - RESPONSE RECEVIED -----
          response = jQuery.parseJSON(response);     //Decode the json response
          
          var MyReturnField1 = response.MyReturnField1;
          
          NumOfChecksCounter++;
          
          
          document.getElementById( 'ajax_value1' ).innerHTML = 'Response: ' + MyReturnField1 + ', number of checks made: ' + NumOfChecksCounter;
          
        });
        
      }
    }, 1000);		 //<<<<Call every time in mS
  </script>
  
  <style>
  #MyWaitingAnimatedIcon {
    border: 6px solid #f3f3f3;
    border-radius: 50%;
    border-top: 6px solid #777777;
    width: 40px;
    height: 40px;
    -webkit-animation: animated_icon_spin 2s linear infinite; /* Safari */
    animation: animated_icon_spin 2s linear infinite;

    margin-top: 10px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 10px;
  }
  @-webkit-keyframes animated_icon_spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
  }
  @keyframes animated_icon_spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
  }
  </style>

  <div id="MyWaitingAnimatedIcon"></div>
  <p style="text-align:center;"><span id='ajax_value1'>Connecting...</span></p>
  
_END;
Add this to your funcitons.php
//**************************************************
//**************************************************
//********** AJAX CALLBACK - MY TEST PAGE **********
//**************************************************
//**************************************************
add_action ( 'wp_ajax_my_test_page_ajax_action_callback', 'my_test_page_ajax_action_callback' );        //For AJAX calls made for logged in users  <<<For namespaces use: '\MyNamespaceName\my_test_page_ajax_action_callback
add_action ( 'wp_ajax_nopriv_my_test_page_ajax_action_callback', 'my_test_page_ajax_action_callback' ); //For AJAX calls made from non logged in users  <<<For namespaces use: '\MyNamespaceName\my_test_page_ajax_action_callback
function my_test_page_ajax_action_callback()
{  
  
  //Check the nonce
  check_ajax_referer('my-nonce-special-string', 'security');      //Nonces are tied to the user ID which is handled by php.  This will die(); if the nonce check fails     //<<<<DELETE LINE IF USING FOR NON LOGGED IN USERS!
  
  
  $MyRequestField1 = '';
  if (isset($_POST['MyRequestField1']))
    $MyRequestField1 = sanitize_text_field($_POST['MyRequestField1']);
  
  $MyRequestField2 = '';
  if (isset($_POST['MyRequestField2']))
    $MyRequestField2 = sanitize_text_field($_POST['MyRequestField2']);

  //<<<Do your handling of the request here...
  
  $MyReturnField1 = "Hi there ($MyRequestField1-$MyRequestField2)";  
  
  $ReturnArray = array(
                  "MyReturnField1" => $MyReturnField1
                  );
  echo json_encode($ReturnArray);

  wp_die();     //Terminate immediately and return a proper response
}

Feel free to comment if you can add help to this page or point out issues and solutions you have found. I do not provide support on this site, if you need help with a problem head over to stack overflow.

Comments

Your email address will not be published. Required fields are marked *