How to make a post request processed in the background

Question

I've currently got the following button:

<input class="submitbutton" name="start" type="button" value="start"
    onClick="window.location='vservermanage.php?_v=<?=$this->vid;?>'">

This button starts the current state of the 'service' - Either offline/online etc.

The page then loads & using if statements I can read whether it's offline or online. (PHP)

How do I make this post in the background instead - and once the result is returned process a javascript code, The following code also occurs when the page refreshes.

<?php if($this->msgsessuccess) { ?>
    <div id="successbox"><?=$_lang[$this->msgsessuccess];?></div>
<?php } ?> 
<?php if($this->msgseserror) { ?>
    <div id="errorbox"><?=$_lang[$this->msgseserror];?></div>
<?php } ?>

I also have the following code which I want to do the same with HOWEVER I want to make this one automatic instead (every 2 seconds)

<input class="submitbutton" name="refresh" type="button" value="refresh"
    onClick=" window.location='vservermanage.php?_v=<?=$this->vid;?>'">

The above code refreshes the state of the service.

You can do it with Ajax calls. Info about the Ajax function of jQuery: http://api.jquery.com/jquery.ajax/. And check this question for how to do it without jQuery: http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery — Sven van Zoelen, Apr 11 '15 at 19:46

score 2 · Accepted Answer · answered Apr 11 '15 at 19:59

There are a few elements to this but all can be achieved quite easily with JQuery. I assume you are including JQuery in your HTML head.

To illustrate you can tap into the click that happens on your submit button and then trigger an AJAX post, then do something with the results. Some example code:

        $('.submitbutton').on('click', function(e) {
          // Stop the browser from doing anything else
          e.preventDefault();
          // Do an AJAX post
          $.ajax({
            type: "POST",
            url: "vservermanage.php",
            data: {
              _id: id_value // various ways to store the ID, you can choose
            },
            success: function(data) {
              // POST was successful - do something with the response
              alert('Server sent back: ' + data);
            },
            error: function(data) {
              // Server error, e.g. 404, 500, error
              alert(data.responseText);
            }
          });
        });

The id_value parameter needs setting or obtaining, presumably from the original rendered page. You could for example, store the ID in a hidden form field e.g.

<input type="hidden" name="id_value" id="id_value" value="<?php echo $id;?>">

... and then include it like

_id: $("#id_value").val()

Regarding the second query, you could run the above POST within a standard JavaScript timer, e.g.

setInterval(function(){ 
  $.ajax({
    ...
    });
}, 2000);

I hope I've understood your question and that this helps put you on the right track.

Cristik · Answer 2 · 2020-10-19T12:26:22.727

You can use $.ajax(), or $.post(), even $.get(), but I wouldn't recommend allowing GET requests to modify data. Something along the lines:

function startProcess() {
    $.ajax({
        url: "vservermanage.php?_v=<?=$this->vid;?>",
        type: "POST",
        success: function(data) {
           // proces the data if interested
           // or just do what you need
        }
    });
}

, and you set this function as the click handler for your button.

How to make a post request processed in the background

2 Answers2