$.post(...) not recognizing JSON body

Question

I'm trying to do a POST request to the server like this:

var body = {
    PatientAgeFilter: {
        CompareOperator: parseInt(self.patientAge()),
        MoreThanVal: {
            AgeSpecifier: 0,
            AgeValue: parseInt(self.patientAgeLow())
        },
        LessThanVal: {
            AgeSpecifier: 0,
            AgeValue: parseInt(self.patientAgeHigh())
        }
    }
};

$.post(url, body, self.results, "json").done(function () {
    console.log("request done!");
    console.log(self.results());
});

The URL is set correctly, self.results is a Knockout.JS observableArray(), and the body is set as above.

Server side, this is the code handling the request:

[HttpPost]
public IQueryable<Measurement> GetMeasurements(MeasurementQuery queryOptions)
{
    ...
    if (queryOptions != null) {
        if (queryOptions.PatientAgeFilter.CompareOperator != CompareOperator.Any) {
            ...
        }
    }
}

I've set a breakpoint on if (queryOptions != null), and queryOptions is not null. But the content of queryOptions stays default, even though I specify the fields in body (f.e. the CompareOperator should equal 3, but it stays 0 - which equals CompareOperator.Any), so the body of the POST request isn't parsed properly.

Can anybody help me out here as to why this happens? Much appreciated!

Maybe you just need to stringify your results - JSON.stringify(self.results()) — Bob Mac, Aug 07 '14 at 15:06
@hindmost That's not a problem, I've used that in other requests before without any errors or whatever. — Pieter VDE, Aug 08 '14 at 06:51
@BobMac The results appear as they should, they're just not the results I expected. — Pieter VDE, Aug 08 '14 at 06:51

Ilya Luzyanin · Answer 1 · 2014-08-08T07:43:20.697

2

Your post method is incorrect in 2 ways:
~~1. As already stated in comments, you should use JSON.stringify for your data.~~(see update below)
2. Third parameter (if present) must be a success callback.

So, this variant should work:

...
$.post(url, JSON.stringify(body), function(results) {
    self.results(results);
}, "json");

UPDATE 1:

The problem is not in JSON.stringify indeed, since WEB Api by default supports application/x-www-form-urlencoded which is default content-type for $post(). So, my next guess that the problem is with your server model. Make sure that CompareOperator, MoreThanVal and LessThanVal are actually properties, not fields (and all their children, which you would like to bind). WEB API doesn't bind fields.

edited Aug 08 '14 at 07:43

answered Aug 07 '14 at 16:46

Ilya Luzyanin

7,910
4
29
49

The problem is not the callback function, but passing the body. If I look at the content of `body` when the request hits the breakpoint, the values are not properly filled in. – Pieter VDE Aug 08 '14 at 06:49
See my answer to the question - the problem was caused by the request body, as I expected. – Pieter VDE Aug 08 '14 at 08:02

score 1 · Answer 2 · edited May 23 '17 at 12:05

1

The problem was - as I thought - that the request body didn't get through to the server properly. I changed this

$.post(url, body, self.results, "json");

to the following

$.ajax({
    url:url,
    type:"POST",
    data:JSON.stringify(body), //necessary for the data to be parsed properly
    contentType:"application/json; charset=utf-8", //important!
    dataType:"json",
    success: function(results){
        self.results(results);
    }
});

And now it works as it should.

I used this SO question for the answer.

edited May 23 '17 at 12:05

Community

1
1

answered Aug 08 '14 at 08:01

Pieter VDE

2,195
4
25
44

Glad that helped. Although it's strange, that my updated answer didn't work out - I've checked it on my machine, works perfectly. – Ilya Luzyanin Aug 08 '14 at 08:09
I know, I'd expect it to work too. Anyhow, I'm just glad I got this solved, been looking for more than a day for this issue. – Pieter VDE Aug 08 '14 at 08:10

$.post(...) not recognizing JSON body

2 Answers2

UPDATE 1: