Send JSON to the server using jQuery

Question

I have the need to send an array of ID's to my server-side in the form of a JSON Object.I am using a dropdownlist where multiple values can be selected to do an action with them.

To get them in an array, I've used:

var selectedArray = [];

            var selectObj = document.getElementById('addedList');
            var i=0;
            var count=0;
            for(i=0;i<selectObj.options.length;i++){
                selectedArray[count] = selectObj.options[i].value;
                count++;
            }

Now the question is, I need to get those ID's to the server. I've always thought of sending it like a JSON object, since it has a variable amount of parameters. As far as I found out, you can convert a JS object to JSON.

Now I do have a few questions:

Could you give me an example of how to convert it? There seem to be a million ways, one of them being JSON.stringify(jsObj);. My object would simply consist of an array of values. As far as I know this would be an example:

{ array : ["value1","value2","value3"] }

Another question is: How can I send this using jQuery? Can I send a JSON object to the server using $.getJSON? (This uses $.GET under the hood), or do I need to use $.POST ?

Now I've just been trying, but can't get it out...

$.getJSON code

        $.getJSON("removerequest.htm",{ ids: JSON.stringify(selectedArray) }, function(data){
            $('#removerequestdiv').text('');

            $('#removerequestdiv').append('<select name="addedList">');
            for(var index in data){
                $('#removerequestdiv').append('<option value="' + data[index].id + '">' + data[index].voornaam + data[index].familienaam + '</option>');
            }
            $('#removerequestdiv').append('</select>');
        });

getJSON only grabs a file with json data in it. You need to use some form of post. Theres ajax and post. There is also a json parameter which i believe you can use to send the data. can't remember if this is only used to tell that the return value is json format. — Matt
– Matt, Commented Nov 7, 2010 at 15:04

Pointy · Accepted Answer · 2010-11-07 15:35:48Z

15

The $.getJSON() routine is for fetching JSON-encoded content from the server. Your problem is the opposite: you want to send it to the server.

You should understand the terminology here. There's no such thing really as a "JSON object" in Javascript. It's just a Javascript object of some sort, and there's nothing special about it in that sense. What you want to do is serialize the Javascript object into a single string. That string is your parameter you'll send to the server, and the server will deserialize that string back into an object (in the context of whatever language your server code is using).

Thus, when you call JSON.stringify(obj), what you get is just a string. Passing such a string back to the server is no different than passing any other string; it's just a parameter. Use $.post() to post it, or you can even just stuff it into the value of a simple form input element and post a form the old-fashioned way.

answered Nov 7, 2010 at 15:35

Pointy

415k62 gold badges600 silver badges631 bronze badges

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

3 Comments

toomuchcs Over a year ago

Thanks, that clears up a lot! Is it possible to send JSON to the server and as well receive JSON with $.post()?

Pointy Over a year ago

The response sent back by the server is passed in to the handler function you give to $.post(), and that can be whatever you want - it's up to the server software. If your server prepares a response and serializes it as a JSON-encoded string, and sends that back, then your Javascript code can just parse it with the JSON2 library.

Matanya Over a year ago

Great answer. Clear and concise +1

Collectives™ on Stack Overflow

Send JSON to the server using jQuery

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