jQuery not sending JSON on AJAX POST request

Question

I am a little confused here,I am trying to post data to my node js server using the following code:

$.ajax({type:'POST',
        url:'/map',
        data:'type=line&geometry='+str,
        success:function(msg)
        {
          console.log(msg);
        },
        datatype:'json'     
    });

This is the result here:

 { type: 'line', geometry: 'b~cqCge{b[mv|q@xnyC' }

This is not JSON.I had previously tried to use contentType and do this like this:

$.ajax({type:'POST',
        url:'/map',
        data:{type:'line',geometry:str},
        success:function(msg)
        {
            console.log(msg);
        },
        datatype:'json',
        contentType:"application/json"  
    });

Even this sent the data without any change.I have also tried the above method using the data string from the first one.I have also tried setting processData to false along with the methods in the code blocks.

It is important to me that the data be in JSON and use AJAX because I am trying to insert into mongodb from node js using mongojs and it fails

Well I'd wager that `str` is actually an object, as this smells of an attempt to send GeoJSON type data. Lots of responses here, but I would look for something that would produce a JSON string from an object. Just to help weed out the right one. And keep "contentType" there. Your server may not care, but it **should**. — Neil Lunn, Mar 13 '14 at 08:57
@NeilLunn str is a String obtained by using `google.maps.Geometry.encodePath` which returns a `String` — vamsiampolu, Mar 13 '14 at 09:01

score 15 · Accepted Answer · answered Mar 13 '14 at 08:19

15

Actually dataType has nothing to do with the input but rather the output.

Instead what you want is to stringify your input data and then send that down as a single variable to your backend which can then decode it:

$.ajax({type:'POST',
    url:'/map',
    data: {data: JSON.stringify({type: 'line', geometry: str})},
    success:function(msg)
    {
       console.log(msg);
    },
    dataType:'json'     
});

That way in your backend you just decode data and it should be now a fully functioning object from JSON.

Note you will need the JSON class for this, JQuery does not include this ability by default: https://github.com/douglascrockford/JSON-js

answered Mar 13 '14 at 08:19

Sammaye

43,242
7
104
146

Is adding `charset:'utf-8` nessecary?? – vamsiampolu Mar 14 '14 at 03:37
@user2309862 I never do so I would say no unless it is really needed – Sammaye Mar 14 '14 at 08:01
I was at work until 10pm last night trying to figure this out. I was getting an undefined result from my variables on the back end and indeed on the front end my request was sending an object. I'm going in today (on a Saturday) and I'm going to try this solution out to see if it works! I'll upvote it if it does! :) – nasaQuant Aug 05 '17 at 14:19

kmonsoor · Answer 2 · 2016-09-02T23:17:13.363

5

I was facing same issue, and NodeJS API backend was receiving Undefined request.body.

How i was able to solve by calling AJAX as following:

$.ajax({
    url: serviceURL,
    data: JSON.stringify(jsonData),
    dataType: 'json',
    type: 'POST',
    contentType: 'application/json',
    success: response => console.log(response),
    error: e => console.log(e)
});

Please note that I have to mention both contentType: 'application/json', and dataType: 'json'. Also, note that JSON.stringify-ing was needed on the payload JSON data.

edited Sep 02 '16 at 23:17

answered Sep 02 '16 at 23:12

kmonsoor

7,600
7
41
55

This is the one that solved my issue so I upvoted it. I had to put it in this very order and include the content-type as it wouldn't work with out it. Thanks!!! – lopezdp Aug 05 '17 at 17:16

score 1 · Answer 3 · answered Mar 13 '14 at 08:11

Use dataType instead of datatype, note the T is Capital in Type like,

dataType:'json',

Try this,

$.ajax({
    type:'POST',
    url:'/map',
    data:{type:'line',geometry:str},
    dataType:'json',// use dataType not datatype
    success:function(msg) {
        console.log(msg);
    }     
});

Read jquery.ajax()

score 1 · Answer 4 · answered Mar 13 '14 at 08:28

Url = "http://example.com";

var postData = $('#selectorid').serialize();

    $.ajax({
            type: 'POST',
            data: postData+'&FormType=InsertForm',
            url: Url,
            success: function(data){
                    //console.log(data);
            },
            error: function(){
                //console.log(data);
                alert('There was an error in register form');
            }
            });

Post the all value in php. Please try it.

Anoop Joshi P · Answer 5 · 2014-03-13T08:17:59.327

0

Try with this

$.ajax({ type: 'POST',
        url: '/map',
        data: {type:"line",geometry : str},
        success: function (msg) {
            console.log(msg);
        },
        dataType: 'json'
    });

Like @Rohan Kumar mentioned, replace datatype with dataType

edited Mar 13 '14 at 08:17

answered Mar 13 '14 at 08:11

Anoop Joshi P

25,373
8
32
53

Your code has errors, you missed a `,` after `data:{...}` – Rohan Kumar Mar 13 '14 at 08:14

score 0 · Answer 6 · answered May 05 '21 at 06:03

I had also faced this problem but this code solved my issue:

$.ajax({
  method: 'POST',
  type: "POST",
  url: "/admin/get-message-details",
  data: {"messageId":messageId},
  success: function(){

  }
});

By the way data from client to server travels in the form of string. So you can prepare & send your data in the structure of JSON.

jQuery not sending JSON on AJAX POST request

6 Answers6