Qfyilyi

I have a variable, called images, in my frontend holding a handful of images selected by the user.
The following:

JSON.stringify(images) 

would then return

["image1", "image2", "image3"]

if the user selected the first three images.

I want to POST this array to Flask, make flask do some manipulation and then return the images in a new route.
My jQuery script for the HTTP post looks as follows:

$("document").ready(function() {

$("#btn1").click(function(){  

$.ajax({

type: 'POST',

contentType: 'application/json',

url:  "{{ url_for('filter') }}",

dataType : 'json',

data : JSON.stringify(images) 

})

})

})

The route responsible for the manipulation looks as follows:

 @app.route("/filter", methods=["POST", "GET"])

 def filter():

     if request.method=="POST":

         result=request.get_json()

         ## Do some manipulation to result

 return render_template("result.html",result=result)

My problem is that the data retrieved by Flask is empty.

The dataType for the response expected from the Flask app server was configured to be JSON.

dataType: 'json',

That is not the right dataType as the Flask server returns HTML in it's response and jQuery runs into error trying to parse it into a JavaScript object.

return render_template("result.html", result=result)

JSON response can be returned from the server and handle appropriately in the success handler.

from flask import jsonify



#...



return jsonify(result)

Or the dataType for the response set to html (for this, you can insert the returned markup piece into HTML document).