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? — Taplar
– Taplar, Commented Jul 10, 2018 at 16:14

Ahmad · Accepted Answer · 2018-07-11 05:43:05Z

17

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

});

edited Jul 11, 2018 at 5:43

answered Jul 10, 2018 at 17:13

Ahmad

8877 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

user10047212 · Accepted Answer · 2018-07-10 18:24:26Z

0

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
});

answered Jul 10, 2018 at 18:24

user10047212

Comments

Shashwat Kaundinya · Accepted Answer · 2018-07-10 18:19:39Z

-1

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

edited Jul 10, 2018 at 18:19

answered Jul 10, 2018 at 17:14

Shashwat Kaundinya

3312 silver badges6 bronze badges

Collectives™ on Stack Overflow

jQuery : How to send JSON data in AJAX post?

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related