Flask động cập nhật dữ liệu mà không cần tải lại trang

tôi đang cố gắng để tạo ra một cái gì đó giống như Google Suggest Tool (thông qua đề nghị api http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q=query)Flask động cập nhật dữ liệu mà không cần tải lại trang

Tôi đang lắng nghe những thay đổi đầu vào, và gửi dữ liệu đi 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 
     } 
    });

Sau đó tôi đang xử lý dữ liệu này và gửi nó đến Google API và có phản ứng bằng 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)

trong Jinja cố gắng để in nó trong HTML động:

 <label id="value_lable"> 


      {% for suggestion in suggestions_list %} 
       {{ suggestion }} 
      {% endfor %} 

     </label>

Nhưng biến trong Jinja không cập nhật động và in danh sách trống.

Làm cách nào để in đề xuất từ danh sách động trong HTML?

Nguồn

2016-12-04 Konstantin Rusanov

trong JavaScript 'của bạn thành công: 'chức năng là trống rỗng vì vậy bạn không phải làm gì với dữ liệu từ Flask. – furas

Tôi cần sửa chữa những gì? –

Tôi nghĩ bạn không biết AJAX/JavaScript hoạt động như thế nào. JavaScript gửi dữ liệu đến Flask, Flask gửi lại một số dữ liệu - tốt hơn như JSON - và JavaScript nhận dữ liệu này và cập nhật HTML trong trình duyệt. – furas

dụ làm việc:

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>

Nguồn

2016-12-04 21:49:09 furas

Làm việc cho tôi. Cảm ơn! –

Điều này có được coi là an toàn không? Ai đó có thể điều hướng đến https: //.../suggestions và nó sẽ trả về một trang. Có một số cách mà chúng ta có thể ngăn chặn trả lại mẫu trả lại trừ khi cuộc gọi đến từ yêu cầu AJAX? – Mike

Nó hoạt động tuyệt vời, cảm ơn bạn. Tôi chỉ có một vấn đề khi tôi cố gắng để tải một HTML (suggest.html ví dụ) có javascript bổ sung, làm thế nào tôi nên xử lý đó? – user1265067

Flask động cập nhật dữ liệu mà không cần tải lại trang

Trả lời

Các vấn đề liên quan