Flask Dynamische Datenaktualisierung ohne die Seite neu laden

Ich versuche, so etwas wie Google erstellen vorschlagen Tool (über vorschlagen api http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q=query)Flask Dynamische Datenaktualisierung ohne die Seite neu laden

I-Eingang Änderungen hören bin, und senden Daten gehen GET:

$("#search_form_input").keyup(function(){ 
var some_var = $(this).val(); 
    $.ajax({ 
     url: "", 
     type: "get", //send it through get method 
     data:{jsdata: some_var}, 
     success: function(response) { 

     }, 
     error: function(xhr) { 
     //Do Something to handle error 
     } 
    });

Danach ich bin Umgang mit diesen Daten und an Google API senden und bekam Antwort in Python:

@app.route('/', methods=['GET', 'POST']) 
def start_page_data(): 
    query_for_suggest = request.args.get('jsdata') 

    if query_for_suggest == None: 
     suggestions_list = ['',] 
     pass 
    else: 
     suggestions_list = [] 
     r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q={}&gl=in'.format(query_for_suggest), 'lxml') 
     soup = BeautifulSoup(r.content) 
     suggestions = soup.find_all('suggestion') 
     for suggestion in suggestions: 
      suggestions_list.append(suggestion.attrs['data']) 
     print(suggestions_list) 
    return render_template('start_page.html', suggestions_list=suggestions_list)

in Jinja versuchen, es in HTML zu drucken dynamisch:

Aber Variable in Jinja wird nicht dynamisch aktualisiert und leere Liste gedruckt.

Wie Vorschläge aus Liste dynamisch in HTML drucken?

Quelle

2016-12-04 Konstantin Rusanov

in JavaScript Ihre 'Erfolg:' Funktion ist leer Du machst also nichts mit Daten von Flask. – furas

Was muss ich reparieren? –

Ich denke, du weißt nicht, wie AJAX/JavaScript funktioniert. JavaScript sendet Daten an Flask, Flask sendet Daten zurück - besser als JSON - und JavaScript empfängt diese Daten und aktualisiert HTML im Browser. – furas

Arbeitsbeispiel:

app.py

from flask import Flask, render_template, request 
import requests 
from bs4 import BeautifulSoup 


app = Flask(__name__) 


@app.route('/') 
def index(): 
    return render_template('index.html') 


@app.route('/suggestions') 
def suggestions(): 
    text = request.args.get('jsdata') 

    suggestions_list = [] 

    if text: 
     r = requests.get('http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q={}&gl=in'.format(text)) 

     soup = BeautifulSoup(r.content, 'lxml') 

     suggestions = soup.find_all('suggestion') 

     for suggestion in suggestions: 
      suggestions_list.append(suggestion.attrs['data']) 

     #print(suggestions_list) 

    return render_template('suggestions.html', suggestions=suggestions_list) 


if __name__ == '__main__': 
    app.run(debug=True)

index.html

<!DOCTYPE html> 

<html> 

<head> 
    <title>Suggestions</title> 
</head> 

<body> 

Search: <input type="text" id="search_form_input"></input> 

<div id="place_for_suggestions"></div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 

<script> 
$("#search_form_input").keyup(function(){ 
    var text = $(this).val(); 

    $.ajax({ 
     url: "/suggestions", 
     type: "get", 
     data: {jsdata: text}, 
     success: function(response) { 
     $("#place_for_suggestions").html(response); 
     }, 
     error: function(xhr) { 
     //Do Something to handle error 
     } 
    }); 
}); 
</script> 

</body> 

</html>

suggestions.html

<label id="value_lable"> 
    {% for suggestion in suggestions %} 
     {{ suggestion }}<br> 
    {% endfor %} 
</label>

Quelle

2016-12-04 21:49:09 furas

Arbeiten für mich. Vielen Dank! –

Wird dies als sicher angesehen? Jemand könnte einfach zu https: //.../suggestions navigieren und es würde eine Seite zurückgeben. Gibt es eine Möglichkeit, die Wiedergabe der gerenderten Vorlage zu verhindern, wenn der Aufruf nicht von der AJAX-Anfrage stammt? – Mike

Es funktioniert super, danke. Ich hatte gerade ein Problem, wenn ich versuche, einen HTML-Code (z. B. "suggests.html") mit zusätzlichem Javascript zu laden. Wie soll ich das handhaben? – user1265067

Flask Dynamische Datenaktualisierung ohne die Seite neu laden

Antwort

Verwandte Themen