Kolben Dynamischen Daten aktualisieren ohne die Seite neu laden
ich versuche etwas zu schaffen, wie Google Suggest-Tool (via suggest api http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q=Abfrage )
Höre ich Eingangs ändert, und senden die Daten HOLEN:
$("#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
}
});
Nach, dass ich die Handhabung dieser Daten und sendet diese an die Google API 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 zu drucken versuchen, ist es in HTML dynamisch:
<label id="value_lable">
{% for suggestion in suggestions_list %}
{{ suggestion }}
{% endfor %}
</label>
Aber die Variablen in Jinja nicht dynamisch aktualisieren und drucken leere Liste.
Wie print-Vorschläge aus der Liste dynamisch in HTML?
- in JavaScript Ihrem
success:
Funktion ist leer, also Mach dir nix mit Daten aus der Flasche. - Was ich brauche, um zu beheben?
- Ich denke, dass Sie nicht wissen, wie AJAX/JavaScript arbeiten. JavaScript sendet die Daten zu Kolben, Kolben zurück sendet einige Daten - besser als JSON - und JavaScript empfängt diese Daten und updates HTML im browser.
- Können Sie uns einige Beispiele von, wie kann der Umgang mit diesem?
- Ich
success
Funktion, die Sie haben zu finden-element in HTML - mit$(...)
- und dann können Sie diese aktualisieren - mit Daten, die Sie haben inresponse
. - Ich würde den Einsatz in Kolben getrennt Funktion zum senden von Anregungen.
- Update innerhalb tis success: function(response) {...} ? Wie kann ich Daten empfangen (Liste der Vorschläge) - von der python-app?
success: function(response)
hat Anregungen in Variablenresponse
- wenn ich versuche, dein google-link direkt im browser, dann gibt es mir eine leere Seite. Ich erwarte, dass es gibt Daten als JSON, so dass Ihr JavaScript könnte es erhalten direkt - ohne Flasche - und zur Erzeugung von HTML auf der Seite.
- XML-Datei, nicht als JSON
- Es reaturns leere Datei ist, vielleicht müssen Google-Konto und Google-Projekt mit eigenem API-key.
- OK, ich musste verschiedene text-in-Abfrage für Vorschläge 🙂
- Die Daten aus dieser Datei - kein problem (auf der server-Seite über Kolben), problem ist - dynamisch drucken von Kommentaren im HTML-Format (nach Eingabe der einzelnen Buchstaben im Eingabefeld)
- Kolben schicken sollte, nur minimale HTML mit Anregungen und
sucess
sollte den ie nutzen.$("#place_for_sugestions").html(response)
Du musst angemeldet sein, um einen Kommentar abzugeben.
Beispiel:
app.py
index.html
suggestions.html