Flask Dynamic data update without reload page

Question

i'm trying to create something like Google Suggest Tool (via suggest api http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q=query )

I'm listening input changes, and send data go 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 } });

After that i'm handling this data and send it to Google API and got response 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 trying to print it in HTML dynamically:

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

But variable in Jinja doesn't update dynamically and print empty list.

How to print suggestions from list dynamically in HTML?

in JavaScript your success: function is empty so you do nothing with data from Flask. — furas
– furas, Commented Dec 4, 2016 at 20:50
I think you don't know how AJAX/JavaScript work. JavaScript sends data to Flask, Flask sends back some data - better as JSON - and JavaScript receives this data and updates HTML in browser. — furas
– furas, Commented Dec 4, 2016 at 20:53
I success function you have to find element in HTML - using $(...) - and then you can update it - using data which you have in response. — furas
– furas, Commented Dec 4, 2016 at 20:55

furas · Accepted Answer · 2016-12-04 21:49:09Z

Working example:

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>

Is this considered safe? Someone could just navigate to https://.../suggestions and it would return a page. Is there some way that we can prevent returning the rendered template unless the call comes from the AJAX request?
you can check if request.is_xhr: to see if it was AJAX - but someone can use other tools (ie. Python module requests) to send request with header X-Requested-With: XMLHttpRequest and is_xhr will return True. You could check other headers - ie. User-Agent - to recognize if it is browser but other tools can also send correct header User-Agent. Question is if you really need so "safe" version.

Collectives™ on Stack Overflow

Flask Dynamic data update without reload page

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related