{"id":1039,"date":"2010-06-11T16:00:09","date_gmt":"2010-06-11T10:30:09","guid":{"rendered":"https:\/\/2thenew.today\/blog\/?p=1039"},"modified":"2016-11-30T17:37:43","modified_gmt":"2016-11-30T12:07:43","slug":"jquery-send-json-object-with-an-ajax-request","status":"publish","type":"post","link":"https:\/\/2thenew.today\/blog\/jquery-send-json-object-with-an-ajax-request\/","title":{"rendered":"JQuery: Send JSON Objects with an Ajax Request"},"content":{"rendered":"

Through my blog, I will discuss about sending JSON objects with ajax request using JQuery. We have number of functions in jQuery to kick-off an ajax request. But for sending JSON objects along with the request, I chose jQuer.ajax(). It takes various parameters url, type, data, dataType, beforeSend etc. Its API can be found here<\/a>.<\/p>\n

Lets look at example given below:<\/p>\n

jQuery.ajax({\r\n          url: ,\r\n          type: \"POST\",\r\n          data: {name: \"amit\", id:1 },\r\n          dataType: \"json\",\r\n          beforeSend: function(x) {\r\n            if (x && x.overrideMimeType) {\r\n              x.overrideMimeType(\"application\/j-son;charset=UTF-8\");\r\n            }\r\n          },\r\n          success: function(result) {\r\n \t     \/\/Write your code here\r\n          }\r\n});      \r\n<\/pre>\n
The above example works for simple JSON object. Now lets see how we can send JSON objects list as given below:<\/p>\n
var jsonObjects = [{id:1, name:\"amit\"}, {id:2, name:\"ankit\"},{id:3, name:\"atin\"},{id:1, name:\"puneet\"}];\r\n\r\njQuery.ajax({\r\n          url: ,\r\n          type: \"POST\",\r\n          data: {students: JSON.stringify(jsonObjects) },\r\n          dataType: \"json\",\r\n          beforeSend: function(x) {\r\n            if (x && x.overrideMimeType) {\r\n              x.overrideMimeType(\"application\/j-son;charset=UTF-8\");\r\n            }\r\n          },\r\n          success: function(result) {\r\n \t     \/\/Write your code here\r\n          }\r\n});\r\n<\/pre>\n
If you notice, for sending my json objects it has not been written directly as data: jsonObjects. As it expects the JSON object passed to it written as key value pair. So we made students the key. And since we have json objects stored in a variable, we need to expand the json objects list using stringify(), otherwise it would be sent as a java script object.<\/p>\n
Now on the server we can parse the JSON object, and use it as the list of objects of type map. For example<\/p>\n
\/\/this code is written in grails<\/a> \r\nimport grails.converters.JSON;\r\nList students = JSON.parse(params.students) \/\/students in request params is parsed to json objects and stored in the List\r\nprintln \"Student id: \" + students[0].studentId    \/\/first element of the students list is accessed as a map holding a key studentId\r\n<\/pre>\n
Stay tuned for more updates and visit our product engineering<\/a> innovations.<\/p>\n","protected":false},"excerpt":{"rendered":"
Through my blog, I will discuss about sending JSON objects with ajax request using JQuery. We have number of functions in jQuery to kick-off an ajax request. But for sending JSON objects along with the request, I chose jQuer.ajax(). It takes various parameters url, type, data, dataType, beforeSend etc. Its API can be found here. […]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":400,"footnotes":""},"categories":[1],"tags":[96,27,49],"class_list":["post-1039","post","type-post","status-publish","format-standard","hentry","category-technology","tag-ajax","tag-jquery","tag-json"],"aioseo_notices":[],"aioseo_head":"\n\t\t\n\t\n\t\n\t\n\t\n\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t\n\t\t