How can I use JQuery to post JSON data

Question

I would like to post Json to a web service on the same server  But I don t know how to post Json using JQuery  I have tried with this code     ajax       type   POST       url    form        data    name   jonas        success  function data    alert  data      data          contentType   application json       dataType   json        But using this JQuery code the data is not received as Json on the server  This is the expected data at the server    name   jonas   but using JQuery the server receive name jonas  Or in other words  it s  urlencoded  data and not Json   Is there any way to post the data in Json format instead of urlencoded data using JQuery  Or do I have to use a manual ajax request

User · Accepted Answer

You re passing an object  not a JSON string  When you pass an object  jQuery uses   param to serialize the object into name-value pairs   If you pass the data as a string  it won t be serialized     ajax       type   POST       url    form        data     name   jonas        or JSON stringify   name   jonas         success  function data    alert  data      data          contentType   application json       dataType   json

User · Answer

I tried Ninh Pham s solution but it didn t work for me until I tweaked it - see below  Remove contentType and don t encode your json data    fn postJSON   function url  data        return   ajax               type   POST               url  url              data  data              dataType   json

User · Answer

Base on lonesomeday s answer  I create a jpost that wraps certain parameters     extend       jpost  function url  body            return   ajax               type   POST               url  url              data  JSON stringify body               contentType   application json               dataType   json                          Usage     jpost   form      name   Jonh     then res   gt        console log res

User · Answer

Using Promise and checking if the body object is a valid JSON  If not a Promise reject will be returned   var DoPost   function url  body        try           body   JSON stringify body         catch  error            return reject error             return new Promise  resolve  reject    gt              ajax                   type   POST                   url  url                  data  body                  contentType   application json                   dataType   json                              done function data                    return resolve data                               fail function error                    console error error                   return reject error                               always function                        called after done or fail

User · Answer

The top answer worked fine but I suggest saving your JSON data into a variable before posting it is a little bit cleaner when sending a long form or dealing with large data in general     x000D   x000D  var Data     x000D   name   jonsa   x000D   e-mail   qwerty gmail com   x000D   phone  1223456789 x000D     x000D   x000D   x000D    ajax   x000D      type   POST   x000D      url    form    x000D      data  Data  x000D      success  function data    alert  data      data      x000D      contentType   application json   x000D      dataType   json  x000D      x000D   x000D   x000D

[jquery] How can I use JQuery to post JSON data?

Examples related to jquery

Examples related to ajax

Examples related to json

Examples related to post

Examples related to http-post