jQuery AJAX Call with Multiple Objects for Data Parameter

Question

I'm trying to do something like the following:

$.ajax({
    url: "/Track/Search",
    type: "POST",
    data: {
        startLatLng : { Latitude: firstClickLatLng.lat(), Longitude : firstClickLatLng.lng() },
        endLatLng : { Latitude: secondClickLatLng.lat(), Longitude: secondClickLatLng.lng() }
    },
    dataType: "json",
    success: function (msg) {
        alert("Ah har!: " + msg);
    }
});

With the following action signature:

[HttpPost]
public ActionResult Search(LatLng startLatLng, LatLng endLatLng)

And the class definition for LatLng as follows:

public class LatLng
{
    public float Latitude { get; set; }
    public float Longitude { get; set; }
}

But when I debug on the server the Longitude and Latitude fields are always null or set to zero. On the client-side this isn't the case though. I'm assuming I'm just doing something wrong with my data hash in the jQuery call.

Any ideas?

EDIT

Still no luck:

var myData = {
    startLatLng: { Latitude: firstClickLatLng.lat(), Longitude: firstClickLatLng.lng() },
    endLatLng: { Latitude: secondClickLatLng.lat(), Longitude: secondClickLatLng.lng() }
};
$j.ajax({
    url: "/Track/Search",
    type: "POST",
    data: JSON.stringify(myData),
    dataType: "json",
    success: function (msg) {
        alert("Ah har!: " + msg);
    }
});

The call is made to the server, still no data though. Fields such as firstClickLatLng.lat() definitely have data.

@down voter-- i posted in haste didn't see its the wrong tab, deleted the answer... — Rafay, Feb 24 '11 at 11:52

score 0 · Answer 1 · edited May 23 '17 at 10:33

0

You need to convert the JSON object into a string. Prototype has a method. You could also use JSON.stringify

edited May 23 '17 at 10:33

Community

1
1

answered Feb 24 '11 at 11:46

kgiannakakis

103,016
27
158
194

How about serializeArray() in jQuery? – Kieran Senior Feb 24 '11 at 11:59
No, this is something different. – kgiannakakis Feb 24 '11 at 12:14

score 0 · Answer 2 · answered Feb 24 '11 at 12:01

Your server is recieving a JSON string from the POST and it may not be automagically creating native objects in the manner you expect. You need to use some function to process the string into a native object in your server-side code as well before you call search(). In pseudocode:

var s = JSON.parse(recievedPostString); // convert post string to native obj or array
search( s.startLatLng, s.endLatLng ); // call your function

Also try explicitly converting your data object to a string in your client-side javascript:

...
data: JSON.stringify({ //JSON.stringify isn't multiplatform, use a wrapper for IE7 or below.
    startLatLng : { Latitude: firstClickLatLng.lat(), Longitude : firstClickLatLng.lng() },
    endLatLng : { Latitude: secondClickLatLng.lat(), Longitude: secondClickLatLng.lng() }
}),
...

Chrome reports having the form data as follows `{"startLatLng":{"Latitude":49.42591053045592,"Longitude":-2.0643554687500227},"endLatLng":{"Latitude":49.29890777351432,"Longitude":-2.4021850585937727}}:` — Kieran Senior, Feb 24 '11 at 12:13

score 0 · Accepted Answer · answered Feb 24 '11 at 12:39

The following appeared to work just fine:

data: "{'startLatLng': { 'Latitude': '" + firstClickLatLng.lat() + "', 'Longitude': '" + firstClickLatLng.lng() + "'}, 'endLatLng': {'Latitude': '" + secondClickLatLng.lat() + "', 'Longitude': '" + secondClickLatLng.lng() + "'}}"

A bit frustrating really, and I'm not sure why this worked and other solutions didn't.

jQuery AJAX Call with Multiple Objects for Data Parameter

3 Answers3