POST value from JavaScript to PHP via AJAX without jQuery

Question

I'm trying to send a JavaScript variable to be processed server-side by PHP then echo back the result. My ajax request results in readyState == 4 and status == 200 yet PHP keeps echoing back an empty array/value.

I'm pretty sure this comes from my Ajax call sending an empty request but everything I tried didn't work, so maybe I'm going all wrong here.

JS (from index.html) :

var valueToSend = Math.random(); 

var request = false;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

function send_ajax() {
    if (request) {
        request.open('POST', 'test.php', true);
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                console.log(request.responseText);
            }
        }
        request.send(valueToSend); //this line is probably not sending the value the way I expect it to
    }
}

PHP (from test.php) :

echo $_POST['name']; //simple echo to check if PHP indeed receives valueToSend

My last try was to change request.send(valueToSend); with .send(encodeURI('name=' + valueToSend)); but it just made the ajax call redirect the page location to a non-existing one.

What am I doing wrong ?

Is the path to test.php correct wrt the file that this is executing in? — ayushgp
– ayushgp, Commented Apr 2, 2017 at 18:16

Rajdeep Paul · Accepted Answer · 2017-04-02 18:20:19Z

2

There are few things wrong in your code, such as:

Even through you defined send_ajax() function, you didn't call it anywhere in the code.
With POST request you need to send an HTTP header setRequestHeader() along with the request, like this:
```
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
```
echo $_POST['name']; in test.php page won't work because name is undefined here. Your send() method call should be like this:
```
request.send("name="+valueToSend);
```

So the complete JavaScript code would be like this:

var valueToSend = Math.random(); 

var request = false;
if (window.XMLHttpRequest) {
    request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
    request = new ActiveXObject('Microsoft.XMLHTTP');
}

function send_ajax() {
    if (request) {
        request.open('POST', 'test.php', true);
        request.onreadystatechange = function() {
            if (request.readyState == 4 && request.status == 200) {
                console.log(request.responseText);
            }
        }
        request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
        request.send("name="+valueToSend);
    }
}

send_ajax();

answered Apr 2, 2017 at 18:20

Rajdeep Paul

16.9k3 gold badges21 silver badges39 bronze badges

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

1 Comment

Hal_9100 Over a year ago

Oh my god... I totally forgot about the setRequestHeader() method... Works perfeclty fine now. Thank you !

Collectives™ on Stack Overflow

POST value from JavaScript to PHP via AJAX without jQuery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related