Flacon Dynamique de mise à jour des données sans recharger la page

je suis en train de créer quelque chose comme Google Suggèrent Outil (via suggèrent api http://suggestqueries.google.com/complete/search?output=toolbar&hl=ru&q=requête )

Je suis à l'écoute d'une entrée et d'envoyer des données à l'aller chercher: 

$("#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
      }
    });

Après que je suis la manipulation de ces données et de les envoyer à l'API de Google et obtenu de réponse dans 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)

À Jinja, en essayant d'imprimer en HTML dynamiquement:

        <label id="value_lable">


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

        </label>

Mais variable en Jinja n'est pas mis à jour de façon dynamique et d'imprimer la liste est vide.

Comment imprimer des suggestions à partir d'une liste de manière dynamique en HTML?

dans le JavaScript de votre success: fonction est vide si vous ne faites rien avec les données de Flacon.
Ce dont j'ai besoin pour résoudre ce problème?
Je pense que vous ne savez pas comment AJAX/JavaScript travail. JavaScript envoie des données au Flacon, Flacon envoie des données - mieux que JSON et JavaScript reçoit ces données et les mises à jour de HTML dans le navigateur.
Pouvez-vous envoyer quelques exemples de la façon dont un peut de la manipulation de ce?
Je success fonction, vous devez trouver l'élément HTML à l'aide de $(...) - et puis vous pouvez mettre à jour en utilisant les données que vous avez dans response.

OriginalL'auteur Konstantin Rusanov | 2016-12-04

  1. 17

    De travail exemple:

    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>
    De travail pour moi. Merci!
    Est-ce considéré comme sûr? Quelqu'un pourrait il suffit de naviguer sur https://.../suggestions et il serait de retour d'une page. Est-il un moyen que nous pouvons éviter de retourner le rendu du modèle, sauf si l'appel vient de la requête AJAX?
    Il fonctionne très bien, merci. J'ai juste eu un problème quand j'essaye de charger une page HTML (suggestions.html par exemple) qui a javascript supplémentaire, comment dois-je gérer cela?

    OriginalL'auteur furas