jQuery POST does not send JSON data

Question

I'm trying to do a POST to a service running on localhost with jQuery AJAX, but it keeps returning status code 0 even after I've set jQuery.support.cors = true. I can also navigate to my WCF REST service successfully from my browser. This is what my JavaScript looks like:

    <script>
        jQuery.support.cors = true;
        $(document).ready(function(){
            $.ajax({
                type: "POST",
                url: "http://localhost:8000/Test",
                data: '{"test":"test"}',
                contentType: "application/json",
                dataType: "json",
                success: function (msg) {
                    alert('success');
                },
                error:function(x,e){
                    if(x.status==0){
                        alert('error 0');
                    }
                }
            });
        });
    </script>

Does anyone know what could be causing this? I should also mention that I can't POST to anything on localhost using jQuery.

According to Fiddler, the JSON data is not sent, and a HTTP OPTIONS is done instead of a POST.

Status code 0 means that the process executed without error does it not? What's the problem with 0? — Sunjay Varma, Sep 19 '11 at 04:51
@sunjay03: It means that there was no response to the request, or that it can't see service at the specified URL. I'd get the same response if I set `$.ajax({url` to an invalid one. — rafale, Sep 19 '11 at 05:07

score 5 · Answer 1 · answered Sep 19 '11 at 22:06

5

try this

var dataObj = {test:"test"};

var json = JSON.stringify(dataObj);

then in your ajax call

data: json,

answered Sep 19 '11 at 22:06

Thx so much bro! Worked fine! – vinidog Apr 21 '16 at 23:49

score 2 · Answer 2 · answered Jul 04 '12 at 10:06

You should use a tool like network monitor etc. to see if the browser is asking the server for the allowed headers (using the OPTIONS header request), you may need to supply the correct headers in an OPTIONS response before the actual request is sent to the server (see the article at the bottom).

Also, you could try adding this to the actual call or the ajaxSetup, as you will need to tell the browser to send credentials and allow the cross domain call (I know someone else already mentioned 'crossDomain'):

$.ajaxSetup({
  crossDomain: true,
  xhrFields: {
    withCredentials: true
  }
});

Have a read of this if you get time too.. https://developer.mozilla.org/en/http_access_control

score 2 · Accepted Answer · edited May 23 '17 at 11:52

I didn't want to spend anymore time on this issue, so I resorted to using raw HTML form POST as the usage of JSON wasn't essential in my case.

For anyone else having the same issues outlined in the original post, see this thread for an explanation and a solution: Problem sending JSON data from JQuery to WCF REST method

To summarize, your service needs to be able to handle the HTTP OPTIONS method if it is expected to respond to cross domain calls.

score 1 · Answer 4 · answered Feb 27 '14 at 03:23

So, when the request is cross domain, jQuery will send your post request as a get request anyways. Are you accessing "localhost" in the URL but then your application is sending the requests to the local IP of your machine instead of localhost? Because that's technically cross-domain, which means that you won't receive the request in the expected manner.

E.g. (just tested this locally) Visiting my local site at:

http://localhost/test/

A form on the site submits to my local ip address instead of localhost via $.post():

<form action="http://10.0.0.17/test/" method="post">
   ....[form stuff...]
</form>

This is a cross-domain request

If you're calling $.post() or jquery's ajax() call set to post, it automatically moves your parameters from the post body into the query string.

If you ARE accessing local host, try hitting the site via whatever address your jquery post() method is using as the domain and see if that helps.

See more on cross-domain policies: http://en.wikipedia.org/wiki/Same_origin_policy

score -2 · Answer 5 · answered Sep 19 '11 at 05:26

-2

Send the data as an Object literal instead of a string

data: '{"test":"test"}',

to

data: {test:"test"},

answered Sep 19 '11 at 05:26

Marlin

751
4
8

I tried that, but I'm certain that the problem isn't with the JSON. For some reason, jQuery just can't see localhost:8000 even though my browser can. – rafale Sep 19 '11 at 05:33
Hmm, well i would make this alteration anyway. As for the lack of communication. Perhaps it believes its a cross domain request. If so you could benefit from a JSONP callback. Look into that. – Marlin Sep 19 '11 at 17:16
There is communication between jQuery and the service. However the problem is that although some sort of a request to the specified URL is made, the JSON data is never sent. This results in an HTTP 405. – rafale Sep 19 '11 at 18:13
rafale, I was just reading up on the same origin policy. If that request is being made to a different port (ie. :8000), then it violates the same origin policy and won't be able to access the information without a workaround. The jsonp callback method should work for you. Let us know if you're still having this problem – Marlin Sep 22 '11 at 17:45
I've got access to the server, so I could simply change its port instead. Would 80 or 8080 be better choices? – rafale Sep 23 '11 at 03:19

jQuery POST does not send JSON data

5 Answers5