Can't return any data from jQuery Post

Question

I've been searching for an answer on this one, but none of the answers I found help resolving this issue:

HTTP Post via jQuery is not returning any data.

Here is the javascript code:

$.post(
    <ENDPOINT_URL>,
    <XYZ DATA SENT>, 
    function(data){
        //THIS IS THE PROBLEM HERE
    },
    "json")
    .fail(function(jqXHR, textStatus, errorThrown){
        alert(textStatus);
    });

This calls my endpoint API Url fine, which returns code 200 and a JSON response body:

{message: "XYZ"}

So here is what I've done so far:

1. Because of the asynchronous behavior, I created a function to receive and process the data input. Nothing happens still.
2. Added the .fail to process failures. According to an article my JSON returned may be incorrectly formatted and placing that .fail to process a failure may let me know what's going on... Is there a way to get the actual error message details?
3. Validated my JSON. Is it incorrectly formatted or something I'm not realizing?
4. Replaced the entire code with $ajax instead. Still, getting the same error.

I want to be able to receive that response and process the message "XYZ".

Thank you everyone for your help, much appreciated.

Tutorials/Articles I've followed:

https://api.jquery.com/jquery.post/

How do I return the response from an asynchronous call?

why cant I return data from $.post (jquery)

Answer 1

All, thank you very much for all of the feedback - the issue is now resolved. @Austin French, after reviewing the full method on both the server side and client side javascript, I realized the issue was related to headers.

My apologies for not expanding further on my question and providing further details: I am using Amazon AWS API Gateway to process a backend Lambda function, the client calls out to the function, the function does the job and returns the JSON:

{"message":"xyz"}

I wasn't received this message on the client side using jQuery $.post. The problem came down to how AWS API Gateway processes the request and returns the response.

I needed to include the following headers as part of my Lambda's function response:

"Access-Control-Allow-Origin" : "*"

Here is the full code for the server side response:

//Response
let responseCode = 200;
var responseBody = {
    message: responseMessage
};
var response = {
    statusCode: responseCode,
    headers: {
        "Access-Control-Allow-Origin" : "*"
    },
    body: JSON.stringify(responseBody)
};

Now on the client side, my original function(data){...} receives the response and is able to process it correctly, no errors are being triggered. Client side response handler:

function(data){
    alert(JSON.stringify(data));
 }

Thanks again everyone for your help!

Answer 2

Try following:

$.post(
    ENDPOINT_URL,
    myData,
    function(data) {
        var response = jQuery.parseJSON(data);
        console.log(response);
    }
);

Answer 3

This is the way I usually use it. It sends data as if sent in an html form and receives json response.

var value1, value2;

$.ajax({
  type: "POST",
  url: url,
  data: {"property1" : value1, "property2" : value2},
  success: function(result, status, xhr){
     <here you can process the json you get as response in result}
  },
  error: function(xhr, status, theError){
     <here process if ajax fails>
  },
  dataType: "json"
});

Answer 4

A couple things that won't fit in a comment:

I prefer this format for AJAX:

var myUrl = $(selector).val();
$.post( myUrl, { name: "John", time: "2pm" })
   .fail(function (data) { /* code for failure */ }),
   .done(function( data ) {
    alert( "Data Loaded: " + data );
});

To see what the server is returning however, an easy thing to do is use Chrome's debugger:

Go to the network tab, choose the calling method and then on the right sub pane choose response. You should be able to see not only the response code, but the full contents returned.

A couple additional notes:

the .Done will call the function once the AJAX completes.

Depending on Jquery version you might not have not have a .done but rather .success and vice versa.