jQuery : How to send JSON data in AJAX post?

Question

I am working on AJAX. I create a post request like the following :

   $.ajax({
    'url':'http://localhost/api/create/',
    'method':'POST',
    'dataType': 'json',
    'contentType': 'application/json',
    'data':{
        "refId":585,
        "phone":"0674444444"
     },
     'success': getHandlingStatus

  });

When my request is executed, data are passed as parameters in my request payload and not as JSON data. Here is my Request Payload:

refId=585&phone=0674444444

I want to send data in json format like :

{
"refId":"585",
"phone:"0674444444"
}

What am I missing please ?

Possible duplicate of [How to send JSON instead of a query string with $.ajax?](https://stackoverflow.com/questions/12693947/how-to-send-json-instead-of-a-query-string-with-ajax) — Taplar, Jul 10 '18 at 16:14

Ahmad · Answer 1 · 2018-07-11T05:43:05.197

You need to use JSON.stringify to convert data to JSON along with ProcessData option set to false. As per documentation of jquery:

By default, data passed in to the data option as an object (technically, anything other than a string) will be processed and transformed into a query string, fitting to the default content-type "application/x-www-form-urlencoded". If you want to send a DOMDocument, or other non-processed data, set this option to false.

$.ajax({
'url':'http://localhost/api/create/',
'method':'POST',
'dataType': 'json',
 processData: false,
'contentType': 'application/json',
'data':JSON.stringify({
    "refId":585,
    "phone":"0674444444"
 }),
 'success': getHandlingStatus

});

score 0 · Answer 2 · answered Jul 10 '18 at 18:24

You need to use JSON.stringify() to convert the data to JSON format. See the documentation.

 $.ajax({
'url':'http://localhost/api/create/',
'method':'POST',
'dataType': 'json',
'contentType': 'application/json',
'data':JSON.stringify({
    "refId":585,
    "phone":"0674444444"
 }),
 'success': getHandlingStatus
});

Shashwat Kaundinya · Answer 3 · 2018-07-10T18:19:39.960

Have you tried the following

    $.ajax({
        'url':'http://localhost/api/create/',
        'method':'POST',
        'dataType': 'json',
        'contentType': 'application/json',
        'data': JSON.stringify({
            "refId":585,
            "phone":"0674444444"
         }),
         'processData': false,
         'success': getHandlingStatus

      });

There was a comma missing after processData: false

jQuery : How to send JSON data in AJAX post?

3 Answers3