how to send json request in ajax post method

Question

I'm trying to post json request in ajax call, but I'm not receiving any success response from the request.

Please find my below code: what I'm doing wrong here:

It hit the url and i'm getting 200 ok status but it always go error condition..

Can someone help, what i need to change to work:

I tried data: JSON.stringify({key:"value",key1: "value1"}) - but this also didn't help

<script type="text/javascript">
function JSONTest() {

 $.ajax({
    url: 'http://localhost:8080/test/toSend',
    dataType: 'json',
    type: 'post',
    contentType: 'application/json',
    data: '{key:"value",key1: "value1"}',
    processData: false,
    success: function( data, textStatus, jQxhr ){

        alert("success..." +data);
        $('#response pre').html( JSON.stringify( data ) );
    },
    error: function( jqXhr, textStatus, errorThrown ){
        console.log( errorThrown );
    }
});   

    }

</script>

I'm getting this error -Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/test/toSend -Reason: CORS header 'Access-Control-Allow-Origin' missing). — java tech, Jul 15 '15 at 01:42

Brian Gerhards · Answer 1 · 2015-07-15T01:18:50.447

0

$.ajax is not hooked up as a promise! Use the below code!

function JSONTest() {
    $.ajax({
        url: 'http://localhost:8080/test/toSend',
        dataType: 'json',
        type: 'post',
        contentType: 'application/json',
        data: '{key:"value",key1: "value1"}',
        processData: false
    }).done(function (data, textStatus, jQxhr) {
        $(this).addClass("done");
    }).fail(function (jqXhr, textStatus, errorThrown) {
        console.log("error errorThrown");
    });
};

edited Jul 15 '15 at 01:18

answered Jul 15 '15 at 01:01

Brian Gerhards

839
5
12

Thanks Brian! I used the above code, http request is not going and directly coming to error, I'm not seeing any error in console. – java tech Jul 15 '15 at 01:14
Are you executing the JSONTest? What is the error you are receiving? Just the .error? – Brian Gerhards Jul 15 '15 at 01:15
Sorry, updated! `.error` is deprecated and replaced with `.fail`. – Brian Gerhards Jul 15 '15 at 01:19
If i remove contentType: 'application/json' - request goes and showing 200 ok status in firebug xhr but again its doing to error block only – java tech Jul 15 '15 at 01:19
Try the update, should correct the issue. I did not remove the contentType but will once you confirm. – Brian Gerhards Jul 15 '15 at 01:21
sorry i'm not getting any error - it simply goes to .error block... I tried removing content type: and data: - still its going to .error block – java tech Jul 15 '15 at 01:34
I updated the example above. Please see `.error` is now `.fail`. That was a mistake on my part not taking into account `.error` being deprecated. – Brian Gerhards Jul 15 '15 at 01:36
Got it.. :) I'm getting this error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8080/test/toSend. (Reason: CORS header 'Access-Control-Allow-Origin' missing). – java tech Jul 15 '15 at 01:40
This is a separate issue not to do with the code but rather your server or the server you are referencing. If you are making a call from a localhost, AJAX does not work from localhost. You will need to upload to a server and test calling a free open API or your localhost. http://stackoverflow.com/questions/27009425/how-can-i-fix-the-missing-cross-origin-resource-sharing-cors-response-header There are some nice references and information on this answer. – Brian Gerhards Jul 15 '15 at 01:42

score 0 · Answer 2 · answered Jul 15 '15 at 01:02

0

To use JSON.stringify({key:"value",key1: "value1"}) you need to load this script :

JSON-js

answered Jul 15 '15 at 01:02

Mohamed Salem Lamiri

5,767
6
34
47

how to send json request in ajax post method

2 Answers2