CODEWITHSUNDEEP
javascriptjqueryajaxpost
wx13
wx13

Reputation: 85

what is wrong with my jQuery POST request?

I am trying to authenticate with a remote service through jQuery. First, I verify that I can do this outside of the browser:

 curl -X POST -H "Content-Type: application/json" -H "Accept: appliction/json" -d '{"username":"...","password":"..."}' http://example.com/auth

This successfully returns a token.

Now I try it with jQuery:

$.ajax({
    url: "http://example.com/auth",
    type: "POST",
    dataType: "json",
    contentType: "json",
    data: {username:"...",password:"..."},
    error: function(data){alert(JSON.stringify(data))},
    success: function(data){alert(JSON.stringify(data))}
});

I get a server error (500). Clearly I am doing something wrong. This is my first time trying to do a POST in jQuery, so I don't know how to identify what the problem is. What am I doing wrong here?

P.S. I can successfully do a GET request through jQuery, if I already have a token:

$.ajax({
    url: "http://example.com/stuff?token=f42652adcbfe3ed9d59fae62b5267b8d",
    type: "GET",
    dataType: "json",
    error: function(data){alert(JSON.stringify(data))},
    success: function(data){alert(JSON.stringify(data))}
});

Upvotes: 3

Views: 12920

Answers (6)

alexey
alexey

Reputation: 801

1) Open Network in Tools (f12)

2) Select "Network"

3) Select error row

4) Open "Body" on rights side

5) In title you can see error description eq.

<title>The parameters dictionary contains a null entry for parameter 'Id' of non-nullable type 'System.Int32' for method 'System.Web.Mvc.ActionResult Delete(Int32)' in 'BosCatalog.Controllers.ProductsController'. An optional parameter must be a reference type, a nullable type, or be declared as an optional parameter.<br>Parameter name: parameters</title>

Upvotes: 0

Krish R
Krish R

Reputation: 22711

500 Internal Server Error

The server encountered an unexpected condition which prevented it from fulfilling the request.

Json response from the url may be the reason, you can comment the stringfy function and alert the response. You can use try/catch method in response and check the error.

Upvotes: 0

Mattias &#197;slund
Mattias &#197;slund

Reputation: 3907

Do you post to the same domain as the js was loaded from? If not you need to use jsonp and make sure the server explicitly accepts your request, I believe.

Upvotes: 0

wx13
wx13

Reputation: 85

Thank you everybody for your help. Each little piece of advice helped lead me to the solution. I said it in a comment already, but here is the solution:

  1. The dataType is correctly listed as "json", but the contentType should be listed as "application/json".

  2. The content must be wrapped in JSON.stringify.

Upvotes: 0

monastic-panic
monastic-panic

Reputation: 3997

Update: oops missed a comment saying stringify didn't work. I'll leave this for posterity

Sometimes you need to stringify the data when sending Json, otherwise jquery may serialize the object as a param string rather than as a whole object. It depends on how your server binds the request query to the object. though. Can you debug the server request or is that out of your hands?

Try doing (provided you are on a semi modern browser) :

   data: JSON.stringify({ your: data})

Upvotes: 1

David
David

Reputation: 218798

The only thing I notice is a difference in the data representations. Look at the data in the original request:

-d '{"username":"...","password":"..."}'

And the data in the AJAX request:

data: {username:"...",password:"..."}

The former wraps the keys in strings, whereas the latter doesn't. The whole thing should be a string too. Try:

data: '{"username":"...","password":"..."}'

This would be more consistent with JSON formatted data in general, I believe. Without wrapping the keys in strings, it may be a JavaScript object but it's not JSON data.

Upvotes: 3

Related Questions