POST data to php using vanilla javascript and get it back

Question

I am trying to send variable to php using javascript and trying to receive back and alert that variable. But $_POST['data'] doesn't get a data that I pass and $obj is always null.

If I just echo "some text"; it alerts that.

Here is my javascript code:

getMessageType('some data'); //function call

function getMessageType(str)
{
    data = {'key': str};
    var xhr = new XMLHttpRequest();
    var url = "test.php";
    xhr.open('POST', url, true);
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8');
    console.log(data); //Object {key: "some data"}
    xhr.send(data);

    xhr.onreadystatechange = function () {
    if (xhr.readyState === 4 && xhr.status === 200) {
          console.log(xhr.responseText);
        }
    };
}

Here is my PHP code:

<?php       
$obj = $_POST['key'];
echo $obj;

What I am doing wrong ?

Any help is appreciated. Thanks

it's a string some data which I am passing when I call getMessageType function. you can see at top of code. — Snappy
– Snappy, Commented Jul 19, 2017 at 14:14
You're not providing any sort of key called data, so there's no way to retrieve the value by that key if you never set that key. Perhaps the string is in the POST body instead of the key/value pairs? — David
– David, Commented Jul 19, 2017 at 14:15
Please, quit using alert() for troubleshooting., use console.log() instead. — Jay Blanchard
– Jay Blanchard, Commented Jul 19, 2017 at 14:31
That's your problem. Add console.log(data); just before the send to make sure it is populated. — Jay Blanchard
– Jay Blanchard, Commented Jul 19, 2017 at 14:52

Goufalite · Accepted Answer · 2018-01-30 09:00:33Z

1

You are posting the data with the content-type application/x-www-form-urlencoded.

Therefore your data must be form encoded :

data = "key="+str;

You can check this in your browser if the POST info has any "form data"

answered Jan 30, 2018 at 9:00

Goufalite

2,3633 gold badges17 silver badges30 bronze badges

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

Comments

Uncoke · Accepted Answer · 2020-02-06 11:15:06Z

0

If you need to pass JSON data (object) having content-type application/x-www-form-urlencoded you need to convert it in text format:

  var params = "";
    for (key in data) {
        params += encodeURIComponent(key)+"="+encodeURIComponent(data[key])+"&";
    }

and then send it

xhr.send(params);

answered Feb 6, 2020 at 11:15

Uncoke

1,9224 gold badges33 silver badges63 bronze badges

Collectives™ on Stack Overflow

POST data to php using vanilla javascript and get it back

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related