How should variables be passed through from JavaScript to PHP when using Ajax?

Question

Firstly, I'm aware that variations of this question has been asked before. However, in all prior example, the asker of the question has been using Ajax looking something like this:

$.ajax({
    type: "POST",
    url: 'logtime.php',
    data: "userID=" + userID;
});

However I am unfamiliar with this style. The way I have been taught to make Ajax requests is using code of the following form:

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.php");
xhr.send();

xhr.onreadystatechange = function() {
    if(xhr.readyState === 4) {
        //DEFINE CALLBACK FUNCTION
    }
}

So, using the above Ajax style that I am familiar with, how should data be sent to the server to be processed by my php file data.php? I know it's something to do with including it in the xhr.send() parenthesis, but I'm not sure how exactly this is done?

Also, can the GET method be used if we wish to retrieve data from a database, but must provide a variable to the php in order for it to select the correct data from the database?

Lastly, what is the difference between the Ajax method I have been taught, and the other method I mentioned, which I often see mentioned on SO?

Thanks.

What you have is "raw" ajax. perfectly functional code, but leaves it up to you to handle all the browser variances, backwards compatibility, etc... most people just use the jquery library which wraps all of what you have into a single `$.get(...)` call. Under the hood it's all the same thing anyways - a plain old HTTP request/response cycle. There's no variables in http. just query strings and message bodies. — Marc B, Sep 13 '16 at 14:45
Possible duplicate of [Passing JavaScript Array To PHP Through JQuery $.ajax](http://stackoverflow.com/questions/2013728/passing-javascript-array-to-php-through-jquery-ajax) — g9m29, Sep 13 '16 at 14:47

Leonard Lepadatu · Accepted Answer · 2016-09-14T07:59:29.943

3

Please try:

  `xhr.send('you_user=user&your_password=password');`

... or can use something more elegant:

var d = new FormData();
d.append('you_user', 'user');
d.append('your_passowrd', 'password');
// ...
xhr.send(d);

edited Sep 14 '16 at 07:59

answered Sep 13 '16 at 14:52

Leonard Lepadatu

606
8
14

Okay, but how would I retrieve that data when in the php code? Would I use $_GET['you_user']? – John Smith Sep 13 '16 at 14:54
Yes! To be sure and to check the request add in your logtime.php: var_dump($_REQUEST); – Leonard Lepadatu Sep 13 '16 at 14:56
Perfect, that answers my question. Thank you. – John Smith Sep 13 '16 at 14:57
you are welcome! please choose the answer as accepted ;) – Leonard Lepadatu Sep 13 '16 at 15:03
Sorry, what is the file logtime.php? – John Smith Sep 13 '16 at 16:00
Your url variable from your initial example – Leonard Lepadatu Sep 13 '16 at 16:17

score 2 · Answer 2 · answered Sep 13 '16 at 14:59

There are a number of levels to this.

HTTP supports a number of methods which have different purposes.

To simply quite a lot, the main ones are GET and POST. GET is used to asking for data and POST is used when sending data to the server to change something.

In a GET request, any data you want to send to the server is typically encoded in URL using a query string (encoded using the application/x-www-form-urlencoded scheme.

In a POST request, the data is typically placed in the request body, and will usually also use application/x-www-form-urlencoded. If you wanted to upload files, then you would use multipart/form-data instead.

Encoding the data is probably most simply done using this algorithm:

(This isn't the most efficient way to do it, but it shows the steps clearly).

var data = [
    { key: "Foo", value: "a a a" },
    { key: "Bar", value: "b b b" },
    { key: "Baz", value: "c c c" }
];

var key_value_pairs = [];

for (var i = 0; i < data.length; i++) {
    var pair = encodeURIComponent(data[i].key) + "=" + encodeURIComponent(data[i].value);
    key_value_pairs.push(pair);
}

var query_string = key_value_pairs.join("&");

var url = "data.php" + "?" + query_string;

var xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();

If you wanted to make a POST request, then it is almost the same. You just change the end:

var xhr = new XMLHttpRequest();
xhr.open("GET", "data.php");
xhr.send(query_string);

Lastly, what is the difference between the Ajax method I have been taught, and the other method I mentioned, which I often see mentioned on SO?

It uses the jQuery library (but isn't a very good example of it). You can see where it constructs the query string manually ("userID=" + userID), but it fails to use the encoding routines. The safe approach when using jQuery is to pass an object to data instead:

$.ajax({
    type: "POST",
    url: 'logtime.php',
    data: { userID: userID }
});

How should variables be passed through from JavaScript to PHP when using Ajax?

2 Answers2