CODEWITHSUNDEEP
javascriptajaxjsonjquery
Romain Quellec
Romain Quellec

Reputation: 15

What is the best strategie to send complex data with ajax

I have some informations in a form to send to the server as a (complex) array (or Object if you prefer) with JS/jQuery. (jQuery 1.7.2) I'm thinking about JSON to solve the problem smartly. My code works right now, but i want to know if its possible to do it better.

So this example is pretty typical (The data are more complex irl) : 

dataSend = { 'id': '117462', 'univers': 'galerie', 'options' : { 'email': '[email protected]', 'commenataire': 'blabla', 'notation' : '4' } };

$.ajax({
  url: "/ajax/ajaxMavilleBox.php",
  data: JSON.stringify(dataSend),
  success: function(x){
      smth();
  }
});

In an another context, i have to make the exact same thing without JSON.

With the same example :

dataSend = { 'id': '117462', 'univers': 'galerie', 'options' : { 'email': '[email protected]', 'commenataire': 'blabla', 'notation' : '4' } };

$.ajax({
    url: "/ajax/ajaxBox.php",
    data: $.param(dataSend),
    success: function(x){
        smth();
    }
});

Obviously, I missing something.

The url is :

http://www.mywebsite.com/ajax/ajaxBox.php?id=117462&univers=galerie&options=%5Bobject+Object%5D

And the url should be :

http://www.mywebsite.com/ajax/ajaxBox.php?id=117462&univers=galerie&options[email][email protected]&options[commenataire]=blabla&options[notation]=3

There is any easy way to do it (I hope I don't have to edit the data myself in a loop or something)

Edit : Solution for the second part

Ok, the last part without JSON is correct. In fact, i was using an older version of jQuery in my page. $.param is not so good with jQuery < 1.4

More information here Param Doc

Upvotes: 0

Views: 766

Answers (2)

Johan
Johan

Reputation: 35213

I would suggest setting the type: 'POST', otherwise you will have a data limit eqvivalent of the browsers query string length.

If you use the post method, you should send the data as a json-string. Something like: 

data: { DTO: JSON.stringify(dataSend) }

You need to use json2.js if window.JSON is undefined (like in ie7 for example).

If you are using PHP on the serverside, you can fetch the object using:

$data = json_decode($_POST['DTO']); //will return an associative array

or ASP.NET

public class DataSctructure
{
    public string id { get; set; }
    public string univers { get;set; }
    //etc...
}

var data = HttpContext.Current.Request.Form['DTO'];

DataSctructure ds = new JavaScriptSerializer().Deserialize<DataSctructure>(data);

//properties are mapped to the ds instance, do stuff with it here

Upvotes: 3

Parv Sharma
Parv Sharma

Reputation: 12705

as mentioned by @Johan POST shouldbe used here instead of GET
you can view data you are sending by using the Developer options in the browser you are using just press f12
also make sure you are using jquery >= 1.4
the incorrect serialized string in the url is the way that $.param() used to serialize prior to 1.4 version

Upvotes: 0

Related Questions