Sending Javascript Object to PHP via Ajax

Question

I'm learning Ajax by failure and have hit a wall:

I have an array (if it matters, the array is storing number id's based on what checkboxes the user checks) that is written in Javascript.

I have a function that is called when the user clicks the 'save' button. The function is as follows:

function createAmenities() {
    if (window.XMLHttpRequest) {
        //code for IE7+, Firefox, Chrome and Opera
        xmlhttp = new XMLHttpRequest();
    }
    else {
        //code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById('message').innerHTML = xmlhttp.responseText;
        }
    }

    var url = "create_amenities.php";

    xmlhttp.open("GET", url, true);

    xmlhttp.send();

}

My question is: What can I put in this function to pull the array into the php script I'm trying to call ('create_amenities.php')?

furthermore, should I try using JSON? And if so, how could I send a JSON object via ajax?

Thanks in advance.

Solution 1

If your array has more then 1 dimension or is an associative array you should use JSON.

Json turns a complete array structure into a string. This string can easily send to your php application and turned back into a php array.

More information on json: http://www.json.org/js.html

var my_array = { ... };
var json = JSON.stringify( my_array );

In php you can decode the string with json_decode:

http://www.php.net/manual/en/function.json-decode.php

var_dump(json_decode($json));

Solution 2

I found this question useful for Javascript enthusiasts.

Sending a javascript Object, be it js array or js object, you must stringify the setup before putting it to the server for decode & processing.

Stringifying a js object: Based on your function:

case of Javascript Array object

let my_array = ["select1", "select2", "..."];
my_array = JSON.stringify(my_array);

case of Javascript Object object

let my_obj = {
name: "Daniel",
age: 23,
location: "Nigeria"
}
my_obj = JSON.stringify(my_obj);

Ones on point you can push this to the server, as per use case, u're working with AJAX GET method in sending your stringified object to the server.

Here is the full code:

function createAmenities() {
    if (window.XMLHttpRequest) {
        //code for IE7+, Firefox, Chrome and Opera
        xmlhttp = new XMLHttpRequest();
    }
    else {
        //code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange = function () {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
            document.getElementById('message').innerHTML = this.responseText;
            // if your returned response is in json, please, do ensure to parse the response before displaying
           // like this JSON.parse(this.responseText)
        }
    }
    let my_array = ["select1", "select2", "..."];
    my_array = JSON.stringify(my_array);
    var url = "create_amenities.php?my_json=" + my_array;
    xmlhttp.open("GET", url, true);
    xmlhttp.send();

}

Here are what i noticed out of your codes:

1. You don't need to call xmlhttp inside of xmlhttp object again, all you need is the this

I included the my_json parameter that holds the array object you are sending to the server.

Now, here in the server, you will need to catch the object and convert it to php readable object.

$my_json = $_GET['my_json'];
$my_json = json_decode($my_json);

Now, you can do whatever you wish it, because it has now become a full php array. Example to pick the first array option:

$first = $my_json[0];
echo json_encode($first) // hahaha, you echoed it for AJAX to display
// i used to json_encode() to convert from php object to a js readable object

Solution 3

Loop over the array and append encodeURIComponent('keyname[]') + '=' + encodeURIComponent(theArray[i]) + '&' to the query string each time.

furthermore, should I try using JSON?

You could, but it would mean decoding JSON at the other end instead of letting normal form handling take care of it.

And if so, how could I send a JSON object via ajax?

There is no such thing as a JSON object. JSON takes the form of a string, and you can include strings in query strings (just remember to encodeURIComponent).

Comments

[Jiri Kriz]

This is a clean solution (+1). Just for completeness: the array can also be my_array=[...] and after json=JSON.stringify(my_array) it is sent as url="create_amenities.php?json";

[Always_a_learner]

Can you please help me understand why my array which I created in javascript converted to an object when i get it in php through request params? BTW your answer saved my day.Thanks!