JSON Post not working with jQuery Ajax call, works when I use Curl

Question

For some reason my jQuery ajax request is not working. Every time I click on the button which calls the below javascript, the POST is not sucessful and I get the error:

{"status":"KO","message":"error"} (see my controller action method).

If I use curl, it works fine and I get the response "it works!":

 curl --include --request POST --header "Content-type: application/json" --data '{"articleId":28, "isApproved": true}' http://localhost:9000/article/changeStatus

I seem to be doing everything correctly, I am stringify'ing the json part, setting the content type, what could be wrong here?

var d = JSON.stringify({"articleId": articleId, "isApproved": isApproved});
$.ajax({
    "type": "POST",
    "url": "/article/changeStatus",
    "data": d,
    "dataType": "json",
    "contentType": "application/json;charset=utf-8",
    "success": function(p) {
        alert('success is ' + p.isSuccess + ' message=' + p.message);
    },
    "error": function(p) {

    },
    "complete": function(p){
    }
});

My controller action looks like:

def changeStatus = Action(BodyParsers.parse.json) {  request =>
   val changeStatusRequest = request.body.validate[ChangeStatusRequest]
   changeStatusRequest.fold(
     errors => {
       BadRequest(Json.obj("status" ->"KO", "message" -> "error"))
     },
     cmRequest => {

       Ok("it works!")
     }
   )


 }


 case class ChangeStatusRequest(articleId: Int, isApproved: Boolean)

The reads is:

implicit val changeStatusRequest: Reads[ChangeStatusRequest] = (
    (JsPath \ "articleId").read[Int] and
      (JsPath \ "isApproved").read[Boolean]
    )(ChangeStatusRequest.apply _)

Can you show us your Reads code that validate uses. – wwkudu Nov 25 '15 at 07:26 — wwkudu, Nov 25 '15 at 07:26
@wwkudu I added the reads, sorry about that. – Blankman Nov 26 '15 at 02:03 — Blankman, Nov 26 '15 at 02:03

score 1 · Answer 1 · answered Nov 25 '15 at 02:41

I don't know much so I couldn't explain why this should work but let's give it a try :

var d = JSON.stringify({"articleId": articleId, "isApproved": isApproved});
$.ajax({
    type: "POST",
    url: "/article/changeStatus",
    data: d,

    contentType: "application/json;charset=utf-8",
    success: function(p) {
        alert('success is ' + p.isSuccess + ' message=' + p.message);
    },
    error: function(p) {

    },
    complete: function(p){
    }
});

score 1 · Accepted Answer · edited May 23 '17 at 12:07

1

Interesting. It was not immediately obvious to me. I tried play.Logger.debug(errors.mkString("\n")) in your controller to check if the fold had any issues, which it did not.

It turns out that the datatype: json pair is the culprit. You are returning an Ok, i.e. normal HTML page, so it is not parsable as json and the ajax method thus raises an error.

These SO questions go into more detail:

edited May 23 '17 at 12:07

Community

1
1

answered Nov 26 '15 at 11:32

wwkudu

2,608
3
24
36

I see this error: fold.errors (/articleId,List(ValidationError(error.expected.jsnumber,WrappedArray()))) I guess stringify is making the id into a string? how to fix that? – Blankman Nov 28 '15 at 02:12
Thanks for the debug tip, that helped allot! – Blankman Nov 28 '15 at 02:23
;) glad to hear it. play forms store values as strings, so I guess `stringify({"articleId": Number(articleId)...` if it is coming from a form value – wwkudu Nov 28 '15 at 04:43

JSON Post not working with jQuery Ajax call, works when I use Curl

2 Answers2