How to send data to php using POST and then retrieve data from php using GET in pure javascript?

Question

I want to send data with the POST method to a php server, then retrieve data from the server, using GET method this time (I assume).

Here's the JS :

function send()

function send(leURL, laValeur) {
    try {
        return new Promise(function(resolve, reject) {
            var req = new XMLHttpRequest();
            req.open('POST', leURL);
            req.setRequestHeader("Content-Type", "application/json");
            req.onreadystatechange = function() {
                if (this.readyState == XMLHttpRequest.DONE && this.status == 200) {
                    document.getElementById("result").innerHTML = "Ok!";
                }
            };
            jmail = JSON.stringify(laValeur);
            req.send(jmail);
            resolve("true");                
        });
    }
    catch (err) {
        window.alert("erreur 2");
    }       
}

function recieve()

function recieve(laURL) {
    try {
        var reqt = new XMLHttpRequest();
        reqt.open('GET', laURL);
        reqt.onreadystatechange = function(e) {
            if (this.readyState == XMLHttpRequest.DONE && this.status = 200) {
                var rep = JSON.parse(this.responseText);
                try {
                    window.alert(rep);
                }
                catch (e) {
                    window.alert("erreur 4");
                }
            }
        }
        reqt.send();
        //return rep;   
    }
    catch (e) {
        window.alert("erreur 3");
    }
}

function calls :

//there's a form in the HTML (id="form")
document.getElementById("form").addEventListener('submit', function(evt) {
    evt.preventDefault();
    send(url, mail)
        .then(recieve(url));
});

Old recieve() function (for testing purposes) :

function recieve(laURL) {
    window.alert(laURL);
}

So, as long as I was using old recieve() function, I had send() print "Ok!" and recieve() creating an alert, which makes me think it worked fine. But now that I use the new recieve() function, the page just reloads. (No catch block is even displayed !)

Here's the PHP :

<?php
if (!empty($_POST)) {
    $var = //do something with the data, involving $_POST
    echo $var;
}
else {
    echo "Hello, there !";
}
?>

Since $var was generated out of the first HTTP request (POST), how do I retrieve it in javascript ?

I suspect the error is caused either by the php or because of using two XMLHttpRequests (still I don't know how I should do this using only one HTTP request)

The POST request already returns the value (using echo). All you need to so is show it using your JavaScript — ADyson
– ADyson, Commented Apr 9, 2019 at 9:21
e.g. in the POST request, if (this.readyState == XMLHttpRequest.DONE && this.status == 200) { document.getElementById("result").innerHTML = this.responseText; } . I don't see any need for the GET request, unless you intend to use this at a later time in your process, expecting that the data may have changed on the server. But for that to make any sense, you have to have stored the data somewhere on the server, and also send in the request some identifier telling the server which piece of data to retrieve. — ADyson
– ADyson, Commented Apr 9, 2019 at 9:27
I can't seem to retrieve my javascript variable. $_POST is empty. — AniMir
– AniMir, Commented Apr 9, 2019 at 11:02
Read this: stackoverflow.com/questions/18866571/receive-json-post-with-php — ADyson
– ADyson, Commented Apr 9, 2019 at 11:03
Specifically, this answer: stackoverflow.com/a/50900047/5947043 should be all you'll need. — ADyson
– ADyson, Commented Apr 9, 2019 at 11:04

Quentin · Accepted Answer · 2019-04-09 09:22:36Z

1

Your PHP stores the data in a variable, echos it out, then exits.

At this point, the PHP program has finished, the memory gets cleaned up, and the variable no longer exists.

If you want the data to be available to another request, then you have to store it somewhere persistent such as a session or a database.

If you want to use a single request, then read this.responseText in the readyStateChange handler.

answered Apr 9, 2019 at 9:22

Quentin

949k136 gold badges1.3k silver badges1.4k bronze badges

Sign up to request clarification or add additional context in comments.

Comments

ADyson · Accepted Answer · 2019-04-09 09:51:32Z

0

The POST request already returns the value (using echo). All you need to so is show it using your JavaScript.

e.g. in the POST request:

if (this.readyState == XMLHttpRequest.DONE && this.status == 200) { 
  document.getElementById("result").innerHTML = this.responseText; 
}

I don't see any need for the GET request, unless you intend to use this at a later time in your process, expecting that the data may have changed on the server. But for that to make any sense, you have to have stored the data somewhere on the server, and also send in the request some identifier telling the server which piece of data to retrieve.

answered Apr 9, 2019 at 9:51

ADyson

62.9k16 gold badges86 silver badges99 bronze badges

Comments

Shim-Sao · Accepted Answer · 2019-04-09 09:55:31Z

0

What do you do with your data ?

How do you store them ?

How do you retreive them on the server to sending them after to the client if needed ?

You should store the $var somewhere, generally we use session $_SESSION for that. All depends of what you want finally.

Documentation for PHP session : https://www.php.net/manual/fr/reserved.variables.session.php

Once you have start the session,

I think you want to do something like that:

<?php
if ($_SESSION['var']) {
    echo "already done";
    ...
} else {
  if(!empty($_POST)) {
    $_SESSION['var'] = //do something with the data, involving $_POST
    echo $_SESSION['var'];
  } else {
    echo "var = not done, post = empty";
  }
}
?>

edited Apr 9, 2019 at 9:55

answered Apr 9, 2019 at 9:48

Shim-Sao

2,1422 gold badges21 silver badges24 bronze badges

Collectives™ on Stack Overflow

How to send data to php using POST and then retrieve data from php using GET in pure javascript?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related