使用 Flask、Jinja2、HTML 在按下按钮时更新页面

Question

我是 Flask / Jinja 的新手，有点困惑。

我有一个 index.html 文件，其中包含一个文本输入字段、一个按钮和一个无序列表。我还有一个 main.py 文件，其中包含一些接受输入的函数。

当我按下按钮时，我想在输入字段中获取文本，将文本传递到我的 python 文件（它将进行一些处理/ API 调用），然后传递列表回到 HTML 文件，而不重新呈现页面。我该如何做到这一点？

这是我的代码片段：

在index.html中：

#This is where I want to get the input from 
<input type="text" style="text-align:center;">

#This is the button that should generate the list when I press it
<li><a href="#content" class="button big special">Search</a></li>

在main.py中：

@app.route('/')
def hello():
    """Return a friendly HTTP greeting."""
    return 'Hello World!'

def doesArticleExist(topic):
    foundTopics = wikipedia.search(topic)
    if (len(foundTopics) > 0):
        return foundTopics
    return ["No topics were found! Your topic is new!"]

如有任何帮助，我们将不胜感激！

Answer 1

该程序演示了一种进行维基百科主题搜索的方法。请注意，这依赖于纯 HTML。因此，每次用户单击按钮时它都会重新呈现页面。

from flask import Flask, render_template_string
from flask_wtf import Form
from wtforms import StringField
from wtforms.validators import DataRequired
import wikipedia

app = Flask(__name__)
app.secret_key = 'secret'

class WikiForm(Form):
    key = StringField('Search Term', validators=[DataRequired()])

index_html='''
<html><body>
<form method="POST">
    {{ form.csrf_token }}
    {{ form.key.label }}: {{ form.key() }}
    <input type="submit" value="Go"/>
</form>
<hr />
{% if topics %}<ul>
    {% for topic in topics %}<li>{{ topic }}</li>{% endfor %}
</ul>{% endif %}
</body></html>
'''

@app.route('/', methods=('GET', 'POST'))
def index():
    form = WikiForm()
    if form.validate_on_submit():
        topics = wikipedia.search(form.key.data) or ['No topic found']
        return render_template_string(index_html, topics=topics, form=form)
    return render_template_string(index_html, topics=None, form=form)

app.run(debug=True)

这里是一个使用Javascript的例子，包括jQuery和AJAX。它会在不重新呈现的情况下更新页面，但它确实需要用户启用 Javascript。

from flask import Flask, render_template_string, request, jsonify
import wikipedia

app = Flask(__name__)

index_html='''
<html><body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script type=text/javascript>
  function submit() {
    $.getJSON({{ request.script_root|tojson|safe }} + '/topics',
      { key: $('#key').val() },
      function(data) {
        var ul = $('#result');
        ul.empty();
        $(data.topics).each(function(index, item) {
          ul.append($('<li>',{text:item}));});});}
</script>
Search Term: <input id="key" name="key"/>
<input id="submit" type="button" value="Go" onclick="submit();" />
<hr /><ul id="result"></ul>
</body></html>'''

@app.route('/')
def index():
    return render_template_string(index_html)

@app.route('/topics')
def topics():
    key = request.args.get('key')
    topics = wikipedia.search(key) or ['No topic found']
    return jsonify(topics=topics)

app.run(debug=True)

参考文献：

使用 Flask、Jinja2、HTML 在按下按钮时更新页面

Using Flask, Jinja2, HTML to update page on buttonpress

html

python

jinja2

flask