Getting undefined in callback function in cross domain ajax post

Question

I'm trying to make ajax post request to my flask app and get the answer in the callback function. Unfortunately I got undefined value instead of a json.

Will appreciate any help!

My server-side code:

application = Flask(__name__)
CORS(application)

...

@application.route('/get_forecast', methods=['POST', 'GET'])
def get_forecast():
    if request.method == 'POST':
        print('in post')
        predictions = {} 
        predictions['data'] = calc_forecast(request.get_json()["data"])
        print(predictions)
        return jsonify(predictions)

my client-side code:

  $.ajax({
            type: "POST", 
            url: "http://localhost:5000/get_forecast",
            data: JSON.stringify(markers),
            dataType: 'json',
            crossDomain: true,
            contentType: "application/json",
            done: function(resp, status){
                console.log('done')
                console.log(resp)
                console.log(status)
                console.log('=====')
                }(),
            fail: function(xhr, ajaxOptions, thrownError){
                console.log('fail');
                console.log(thrownError)
                }()

        });

Here's what I got in the flask terminal:

 * Running on http://0.0.0.0:5000/ (Press CTRL+C to quit)
127.0.0.1 - - [02/Dec/2018 12:59:53] "OPTIONS /get_forecast HTTP/1.1" 200 -
in post
{'data': [10.15451836569513, 56.578480707072714, 12.435548873275337]}
127.0.0.1 - - [02/Dec/2018 12:59:53] "POST /get_forecast HTTP/1.1" 200 -

Here's what I got in the chrome console:

demo.html:228 done
demo.html:229 undefined
demo.html:230 undefined
demo.html:231 =====
demo.html:234 fail
demo.html:235 undefined

finefoot · Accepted Answer · 2018-12-02T11:05:01.560

If you look at the examples over at http://api.jquery.com/jQuery.ajax/ they look quite a bit different from your call to $.ajax. I adjusted your code to better resemble the examples. Maybe this helps?

$.ajax({
    type: "POST", 
    url: "http://localhost:5000/get_forecast",
    data: JSON.stringify(markers),
    dataType: 'json',
    crossDomain: true,
    contentType: "application/json"
    })
    .done(function (data, textStatus, jqXHR) {
        console.log('done');
        console.log(data);
        console.log(textStatus);
        console.log('=====');
    })
    .fail(function (jqXHR, textStatus, errorThrown) {
        console.log('fail');
        console.log(textStatus);
    });

I think, you were looking for success and error settings.

Update: Yes, I'm pretty sure, your settings done and fail are wrong. You want to use success and error.

Also, have a look at https://stackoverflow.com/a/10931891/1621041

This means, your code could also look like this, if you want to put everything into the settings of the $.ajax call:

$.ajax({
    type: "POST", 
    url: "http://localhost:5000/get_forecast",
    data: JSON.stringify(markers),
    dataType: 'json',
    crossDomain: true,
    contentType: "application/json",
    success: function (data, textStatus, jqXHR) {
        console.log('done');
        console.log(data);
        console.log(textStatus);
        console.log('=====');
    },
    error: function (jqXHR, textStatus, errorThrown ) {
        console.log('fail');
        console.log(errorThrown);
    }
});

Getting undefined in callback function in cross domain ajax post

1 Answers1