admin管理员组文章数量:1419195
I have an HTML form which makes a POST request to my flask app and the flask app returns a string. I want to display the string on the same HTML page.
index.html
<iframe name="frame" class="hidden"></iframe>
<form action="/upload" target="frame" method="POST">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>
<p id="text"></p>
Note: The hidden <iframe> is kept as the target so that the page doesn't redirect.
app.py
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def my_form():
return render_template('index.html')
@app.route('/upload', methods=['POST'])
def my_form_post():
text = request.form['text']
processed_text = text.upper()
# Some internal stuff with processed text
return processed_text
I want to display processed_text in the <p id="text"></p>
I am new to flask. How do I do that?
I have an HTML form which makes a POST request to my flask app and the flask app returns a string. I want to display the string on the same HTML page.
index.html
<iframe name="frame" class="hidden"></iframe>
<form action="/upload" target="frame" method="POST">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>
<p id="text"></p>
Note: The hidden <iframe> is kept as the target so that the page doesn't redirect.
app.py
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def my_form():
return render_template('index.html')
@app.route('/upload', methods=['POST'])
def my_form_post():
text = request.form['text']
processed_text = text.upper()
# Some internal stuff with processed text
return processed_text
I want to display processed_text in the <p id="text"></p>
I am new to flask. How do I do that?
Share Improve this question asked Aug 28, 2020 at 14:57 Nabameet ChatterjeeNabameet Chatterjee 211 silver badge3 bronze badges1 Answer
Reset to default 3You might want to learn how HTML reads variables using jinja2. The code you're looking for should be. I also added an if example so you can check the syntax for that too:
index.html
<iframe name="frame" class="hidden"></iframe>
<form action="/upload" target="frame" method="POST">
<input type="text" name="text" />
<button type="submit">Submit</button>
</form>
{% if processed_text %}
<p id="text">{{ processed_text }}</p>
{% endif %}
That way, what's inside {{ }} will be looking for a variable. However, that alone is not enough. When you return from a route you can use the same template for different routes, so rendering the same template in upload and passing it the processed_text variable will make your page display the text properly. Note that you shouldn't be using variables in your templates if you don't pass them a value from your app or you might get errors. In this case, since the line containing <p id="text">{{ processed_text }}</p> won't even load unless that variable is defined you shouldn't have a problem, but keep that in mind.
app.py
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def my_form():
return render_template('index.html')
@app.route('/upload', methods=['POST'])
def my_form_post():
text = request.form['text']
processed_text = text.upper()
# Some internal stuff with processed text
return render_template('index.html', processed_text=processed_text)
EDIT: As mentioned in the ments and something I didn't notice when answering was, when you target the iframe in your form you're not stopping the page to reload but rather having it load again inside the frame. Flask's routes aren't the best way to deal with this problem, so you can just remove your upload route and do the text uploading entirely from your HTML file by modifying it like this. I also took out the frame since it was no longer necessary:
<head>
<script>
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#upload').onsubmit = () => {
const text = document.querySelector('#input').value;
document.querySelector('#text').innerHTML = text.toUpperCase(text);
return false;
};
});
</script>
</head>
<body>
<form id="upload">
<input type=text id="input">
<button type="submit">Submit</button>
</form>
<p id="text"></p>
</body>
本文标签： javascriptHow to display returned string from flask in htmlStack Overflow
版权声明：本文标题：javascript - How to display returned string from flask in html? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745277896a2651285.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论