2016-04-13 34 views
-2

Flask/Jinja'ya yeni geliyorum ve biraz kafam karıştı.Flask, Jinja2, HTML'yi kullanarak sayfayı güncelleştirmek için HTML'yi kullanın

Metin giriş alanı, düğme ve sırasız liste içeren bir index.html dosyası var. Ayrıca giriş alan bazı işlevlere sahip bir main.py dosyasına sahibim.

Düğmeye bastığımda giriş alanındaki metni almak istiyorum, metni python dosyama (bazı işlem/API çağrıları yapar) iletir ve sonra yeniden HTML listesine geçmez. - sayfayı büyütmek. Bunu nasıl başarabilirim?

index.html olarak:

#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 olarak: Herhangi bir yardım büyük takdir

@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!"] 

İşte benim kod parçacıklarını vardır!

+1

. Benim önerim iyi bir öğretici ile başlamaktır. Ayrıca bir kitap yazmış ve çok faydalı dersler de yapmış olan Miguel Grinberg'i (http://blog.miguelgrinberg.com/post/the-flask-mega-tutorial-part-i-hello-world) öneriyorum (bkz. YouTube'da). – Cyb3rFly3r

+1

[Ajax] (https://developer.mozilla.org/en-US/docs/AJAX/Getting_Started) aradığınız şeydir. – dirn

cevap

1

Bu program, Wikipedia konu araması yapmanın bir yolunu gösterir. Bunun salt HTML'ye dayantığını unutmayın. Böylece, kullanıcı düğmeyi her tıkladığında sayfayı yeniden oluşturur.

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) 

İşte jQuery ve AJAX dahil olmak üzere Javascript kullanan bir örnek. Sayfayı yeniden oluşturmadan güncelleştirir, ancak kullanıcının Javascript etkin olmasını gerektirir.

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) 

Referanslar: Örneğin bu tür kapsamaz web üzerinde Flask üzerinde belgelerin çok şey var

+0

Teşekkürler! Sanırım şimdi neler olduğuna dair daha iyi bir anlayışa sahibim. Ne yazık ki, bu uygulamaların her ikisi de bana bir yığın hatası veriyor - ama bu başka bir soru. – Chris