Passing Multiple Json Objects as data using jQuery's $.ajax()

Question

I am POSTing data to an MVC controller and I'm attempting to maintain state as well for optimistic concurrency. I'm currently posting back a JSON request, but would be open to workable alternatives?

I am already posting a name/value collection with the following command:

$.ajax({
    url: g_appPath + "/Rounding.aspx/Round/" + $("#OfferId").val(),
    type: 'POST',
    dataType: 'html',
    data: $.toJSON(data), // <-- data = name/value array
    contentType: 'application/json; charset=utf-8',
    beforeSend: doSubmitBeforeSend,
    complete: doSubmitComplete,
    success: doSubmitSuccess
});

I also have an (encrypted) array of id's and timestamps that I want to pass back so the server can decrypt it, then validate that data is still fresh before it saves it.

It is very important that the data object are separate and are not a child of one or the other or in a wrapper array (because of reflective deserialization at the server end). It is also important to note that I want to do this asynchronously and not as a form submit.

My question is: Is there any way I can post back 2 JSON objects using 'application/json' as the content type?

My other question is: Is there a better / another way I could be doing this?

thanks in advance!

UPDATE: I solved my problem, by changing the contentType parameter to default and instead sending the stringified ajax data as separate named parameters in the querystring.

When you use contentType: 'application/json; charset=utf-8', this pushes the data into the body of the request, rather than the querystring. My new $.ajax() post now looks like this:

$.ajax({
    url: g_appPath + "/Rounding.aspx/Round/" + $("#OfferId").val(),
    type: 'POST',
    dataType: 'html',
    data: "RoundingData=" + $.toJSON(data) + "&StateData=" + $.toJSON(stateData),
    // --removed! contentType: 'application/json; charset=utf-8',
    beforeSend: doSubmitBeforeSend,
    complete: doSubmitComplete,
    success: doSubmitSuccess
});

This question really arose because of my inexperience with this type of data operation, and I hope someone looking for this in the future might stumble across this.

thanks!

Dan

Answer 1

As far as I know, there is no way to send back two completely different JSON objects that aren't children of a single parent JSON object and have jQuery decode it for you using the .ajax() method. You could, I suppose, reply with two JSON objects as strings and then use an external JSON library to evaluate the strings into a Javascript Object.

Does that answer your question?

Ooops: You're asking about posting two distinct JSON objects to your controller from jquery..., right? My bad... Yeah, you can do that... Just change this line:

data: $.toJSON(data),

to:

data: { json_1:$.toJSON(data_1), json_2:$.toJSON(data_2) },

Sorry about the mix-up.

Answer 2

If I understand you correctly, functional speaking, you want to send

object 1,
object 2

which is equivalent to sending

[
    object 1,
    object 2
]

The only difference is that the array in the former case is implicit, while in latter it's explicit. It's still there either way, but if you want to send multiple objects in JSON you need to use the explicit approach.

So wrapping the two data objects in an array is really the ideal choice, but if your sever code isn't going to support that you'll need an alternative. The only possible method I can see to do this would be to put both data objects inside another object, like this:

var data = {};
data[0] = data1;
data[1] = data2;

And then you send data along through the AJAX call.

I would go so far as to say that the problem isn't your approach, but rather the JSON handling on the receiving end.