使用 vanilla javascript 将数据发布到 php 并将其取回

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

Answer 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"

Answer 2

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);