{"id":1039,"date":"2010-06-11T16:00:09","date_gmt":"2010-06-11T10:30:09","guid":{"rendered":"http:\/\/www.tothenew.com\/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:\/\/www.tothenew.com\/blog\/jquery-send-json-object-with-an-ajax-request\/","title":{"rendered":"JQuery: Send JSON Objects with an Ajax Request"},"content":{"rendered":"<p>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 <a href=\"http:\/\/api.jquery.com\/jQuery.ajax\/\">here<\/a>.<\/p>\n<p>Lets look at example given below:<\/p>\n<pre>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 &amp;&amp; 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<p>The above example works for simple JSON object. Now lets see how we can send JSON objects list as given below:<\/p>\n<pre>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 &amp;&amp; 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<p>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<p>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<pre>\/\/this code is <a href=\"http:\/\/www.tothenew.com\/grails-application-development\">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<p>Stay tuned for more updates and visit our <a title=\"product engineering solutions\" href=\"http:\/\/www.tothenew.com\/product-engineering\">product engineering<\/a> innovations.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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. [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"iawp_total_views":236},"categories":[1],"tags":[96,27,49],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1039"}],"collection":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/comments?post=1039"}],"version-history":[{"count":0,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/posts\/1039\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/media?parent=1039"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/categories?post=1039"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tothenew.com\/blog\/wp-json\/wp\/v2\/tags?post=1039"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}