Ajax POST returning render_template in Flask?
Question
I have some form which should be sent to the server (as POST request), store a certain object in the DB and return back a new template with some data.
In normal conditions, this would just work fine, but the issue here is that from the form data a quite complex JSON object is created, and that is what should be stored in the database. The JSON is successfully retrieved but the template redirection isn't working:
@app.route('/entry', methods=['GET', 'POST'])
def entry():
if request.method == 'GET':
#Do some stuff
return render_template('entry.html')
elif request.method == 'POST':
#Store the JSON object received and return back a new template with some data
data = request.json
db.store(data)
#Retrieve some other data
other_data = ...
return render_template('diary.html', data=other_data)
I would like to know what is the general approach in these situations (I'm pretty new to Python and Flask itself). To me it looks like this shouldn't be a problem but I can't find an elegant solution to this.
Thanks in advance.
EDIT:
I include the JS related code pretty simplified:
entry.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
var json = {
'foo': 1,
'bar': 2
}
$.ajax('entry', {
type: 'POST',
data: JSON.stringify(json),
contentType: 'application/json',
success: function(data, textStatus, jqXHR){
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log(errorThrown);
}
});
});
</script>
</body>
</html>
diary.html:
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<script type="text/javascript">
var data = {{ data|safe }}
console.log(data);
</script>
</body>
</html>
The behaviour noticed is that jinja template isn't returned, but the HTML page content in the success callback from the POST ajax request:
I'd like to render the new template with the retrieved data after this POST request (done via Ajax).
2 answers
solution1
1 2014-11-20 12:42:29
this will help you
!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
var json = {
'foo': 1,
'bar': 2
}
$.ajax('entry', {
url='type url here',
type: 'POST',
dataType='json',
data: JSON.stringify(json),
contentType: 'application/json',
success: function(data, textStatus, jqXHR){
console.log(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log(errorThrown);
}
});
});
</script>
</body>
</html>
at back end receive data like this way
variable=request.get_json()
now variable is dict
I think this will help you
solution2
0 2014-04-01 16:24:52
give this code a try:
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
$(function(){
var json = {
'foo': 1,
'bar': 2
}
$.ajax('entry', {
type: 'POST',
data: JSON.stringify(json),
contentType: 'application/json',
success: function(data, textStatus, jqXHR){
document.write(data);
},
error: function(jqXHR, textStatus, errorThrown){
console.log(errorThrown);
}
});
});
</script>
</body>
</html>
http://www.w3schools.com/js/js_htmldom_html.asp
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.