Send json array data from html to Flask
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.
jquery ajax flask
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
add a comment |
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.
jquery ajax flask
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
add a comment |
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.
jquery ajax flask
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
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.
jquery ajax flask
jquery ajax flask
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
asked Nov 21 '18 at 18:48
Nicolai IversenNicolai Iversen
846
846
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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).
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
Okay, so I tried both, but it is still like jQuery does not parse any data to Flask. Setting dataType='json' and return jsonify(result), returns null in the /filter route
– Nicolai Iversen
Nov 21 '18 at 19:59
I'd verify the value ofimagesinJSON.stringify(images). I don't see a reason forrequest.get_json()to beNone
– Oluwafemi Sule
Nov 21 '18 at 20:23
Okay yes, you were right
– Nicolai Iversen
Nov 21 '18 at 21:16
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418733%2fsend-json-array-data-from-html-to-flask%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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).
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
Okay, so I tried both, but it is still like jQuery does not parse any data to Flask. Setting dataType='json' and return jsonify(result), returns null in the /filter route
– Nicolai Iversen
Nov 21 '18 at 19:59
I'd verify the value ofimagesinJSON.stringify(images). I don't see a reason forrequest.get_json()to beNone
– Oluwafemi Sule
Nov 21 '18 at 20:23
Okay yes, you were right
– Nicolai Iversen
Nov 21 '18 at 21:16
add a comment |
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).
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
Okay, so I tried both, but it is still like jQuery does not parse any data to Flask. Setting dataType='json' and return jsonify(result), returns null in the /filter route
– Nicolai Iversen
Nov 21 '18 at 19:59
I'd verify the value ofimagesinJSON.stringify(images). I don't see a reason forrequest.get_json()to beNone
– Oluwafemi Sule
Nov 21 '18 at 20:23
Okay yes, you were right
– Nicolai Iversen
Nov 21 '18 at 21:16
add a comment |
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).
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
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).
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
answered Nov 21 '18 at 19:39
Oluwafemi SuleOluwafemi Sule
12.5k1635
12.5k1635
Okay, so I tried both, but it is still like jQuery does not parse any data to Flask. Setting dataType='json' and return jsonify(result), returns null in the /filter route
– Nicolai Iversen
Nov 21 '18 at 19:59
I'd verify the value ofimagesinJSON.stringify(images). I don't see a reason forrequest.get_json()to beNone
– Oluwafemi Sule
Nov 21 '18 at 20:23
Okay yes, you were right
– Nicolai Iversen
Nov 21 '18 at 21:16
add a comment |
Okay, so I tried both, but it is still like jQuery does not parse any data to Flask. Setting dataType='json' and return jsonify(result), returns null in the /filter route
– Nicolai Iversen
Nov 21 '18 at 19:59
I'd verify the value ofimagesinJSON.stringify(images). I don't see a reason forrequest.get_json()to beNone
– Oluwafemi Sule
Nov 21 '18 at 20:23
Okay yes, you were right
– Nicolai Iversen
Nov 21 '18 at 21:16
Okay, so I tried both, but it is still like jQuery does not parse any data to Flask. Setting dataType='json' and return jsonify(result), returns null in the /filter route
– Nicolai Iversen
Nov 21 '18 at 19:59
Okay, so I tried both, but it is still like jQuery does not parse any data to Flask. Setting dataType='json' and return jsonify(result), returns null in the /filter route
– Nicolai Iversen
Nov 21 '18 at 19:59
I'd verify the value of
images in JSON.stringify(images). I don't see a reason for request.get_json() to be None– Oluwafemi Sule
Nov 21 '18 at 20:23
I'd verify the value of
images in JSON.stringify(images). I don't see a reason for request.get_json() to be None– Oluwafemi Sule
Nov 21 '18 at 20:23
Okay yes, you were right
– Nicolai Iversen
Nov 21 '18 at 21:16
Okay yes, you were right
– Nicolai Iversen
Nov 21 '18 at 21:16
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53418733%2fsend-json-array-data-from-html-to-flask%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
