使用Flask，Jinja2，HTML更新按鈕上的頁面

-2

我是Flask/Jinja的新手，有點困惑。使用Flask，Jinja2，HTML更新按鈕上的頁面

我有一個文本輸入框，一個按鈕和一個無序列表的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!"]

任何幫助將不勝感激！

來源

2016-04-13 Chris

有瓶上存在大量的文檔，涵蓋這種例子在網絡上。我的建議是從一個很好的教程開始。我可以推薦Miguel Grinberg（http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world），他也寫了一本書，並做了一些非常有用的教程（參見YouTube ）。 – Cyb3rFly3r

[Ajax]（https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started）是您正在尋找的。 – dirn

此程序演示一種方法來執行維基百科主題搜索。請注意，這依賴於純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)

參考文獻：

來源

2016-04-13 03:53:27

謝謝！我想我現在對現在發生的事情有了更好的理解。不幸的是，這些實現都給我一個大塊的錯誤 - 但這是另一個問題。 – Chris

使用Flask，Jinja2，HTML更新按鈕上的頁面

回答

相關問題