AJAX Send POST Variables to PHP

Question

I am used to sending AJAX requests with jQuery. I now find myself with the task of having to send them using 'vanilla' JS. Using my limited knowledge, I managed to get everything working except for passing the data along with the request. The two variables that are supposed to be being passed along are always filled in as NULL in my database. Every example I have been able to find on here shows the jQuery way, which I have no problem doing.

Can anyone tell me what I am doing wrong? I assume it has something to do with the format of the data, but cannot for the live of me figure it out.

Here is the code for the request. The request object is built in the createXMLHttp() function.

var xmlHttp = createXMLHttp();
var data = {Referrer: document.referrer, Path: window.location.pathname};
xmlHttp.open('post', '/PagePilotSiteHits.php', true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.send(data);

You need to pass the data as querystring

Mouser
– Mouser

2015-01-26 21:14:13 +00:00
Commented Jan 26, 2015 at 21:14 — Mouser
– Mouser, Commented Jan 26, 2015 at 21:14

Mouser · Accepted Answer · 2015-01-26 21:25:51Z

1

 var data = {Referrer: document.referrer, Path: window.location.pathname};

 function buildQueryString(data)
 {
     var dataKeys = Object.keys(data);
     var queryString = "";
     for (var i = 0; i < dataKeys.length; ++i)
     {
         queryString += "&" + dataKeys[i] + "=" + encodeURICompenent(data[dataKeys[i]]); 
     }
     return queryString.substr(1);
 }

 xmlHttp.send(buildQueryString(data));

This should do it. The data needs to be passed as a querystring. This functions will create a querystring from the data object you've provided and encodes the uri components as mentioned by @AlexV and @Quentin.

edited Jan 26, 2015 at 21:25

answered Jan 26, 2015 at 21:15

Mouser

13.3k3 gold badges30 silver badges54 bronze badges

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

3 Comments

AlexV Over a year ago

And don't forget tu escape the data with encodeURIComponent() !

Quentin Over a year ago

xmlHttp.send( encodeURIComponent(data) ); will break the data. You need to run encodeURIComponent on each component of the data, not the whole thing.

Mouser Over a year ago

@Quentin. True, to fast here :-)

Collectives™ on Stack Overflow

AJAX Send POST Variables to PHP

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related