Envoyer des données depuis une zone de texte dans Flask?


92

Je me demandais s'il y avait un moyen de prendre quelque chose d'une zone de texte dans le HTML, de le nourrir dans flask, puis d'analyser ces données avec Python. Je pensais que cela pourrait impliquer certains JS, mais je peux me tromper. Des idées?


Pourquoi ne pas utiliser un formulaire HTML et le POSTER directement? Ou avez-vous besoin de le faire de manière asynchrone? Dans ce cas, vous aurez quelques lectures à faire sur AJAX. :-)
Martijn Pieters

1
Je sais que je peux utiliser un formulaire HTML, mais comment puis-je transmettre ces informations à l'application Flask?
ollien le

Réponses:


154

À moins que vous ne souhaitiez faire quelque chose de plus compliqué, il est assez facile d'alimenter les données d'un formulaire HTML dans Flask.

  • Créez une vue qui accepte une requête POST ( my_form_post).
  • Accédez aux éléments de formulaire dans le dictionnaire request.form.

templates/my-form.html:

<form method="POST">
    <input name="text">
    <input type="submit">
</form>
from flask import Flask, request, render_template

app = Flask(__name__)

@app.route('/')
def my_form():
    return render_template('my-form.html')

@app.route('/', methods=['POST'])
def my_form_post():
    text = request.form['text']
    processed_text = text.upper()
    return processed_text

Il s'agit de la documentation Flask sur l' accès aux données de demande .

Si vous avez besoin de formulaires plus complexes nécessitant une validation, vous pouvez jeter un œil à WTForms et comment les intégrer à Flask .

Note: à moins que vous avez d'autres restrictions, vous n'avez pas vraiment besoin JavaScript du tout pour envoyer vos données (même si vous pouvez l' utiliser).


1
Hé, cela a fonctionné, une fois, mais jette maintenant une erreur 500, des idées?
ollien le

Cela devrait fonctionner très bien ... Mettez app.debug = Truejuste avant app.run()pour obtenir l'exception et la trace de l'erreur.
pacha

Oui, j'ai oublié cela, j'étais un idiot et j'ai oublié de mettre mon HTML dans mon dossier de modèles.
ollien

J'ai perdu un peu de temps à essayer de le faire avec une zone de texte plus grande au lieu d'une zone de texte si quelqu'un a besoin de le faire avec Flask, la solution est ici
cardamome

@cardamom Je ne comprends pas vraiment ce que tu veux dire. L'utilisation d'une zone de texte ou d'une entrée de type texte ne change en rien la solution (celle que vous liez est exactement la même que celle-ci). Vous n'avez pas à changer le côté Python, remplacez simplement <input type="text" name="text">par <textarea name="text"></textarea>et tout devrait bien se passer .
pacha

9

Déclarez un point de terminaison Flask pour accepter le type d'entrée POST, puis effectuez les étapes nécessaires. Utilisez jQuery pour publier les données.

from flask import request

@app.route('/parse_data', methods=['GET', 'POST'])
def parse_data(data):
    if request.method == "POST":
         #perform action here
var value = $('.textbox').val();
$.ajax({
  type: 'POST',
  url: "{{ url_for('parse_data') }}",
  data: JSON.stringify(value),
  contentType: 'application/json',
  success: function(data){
    // do something with the received data
  }
});

2

Toutes les interactions entre le serveur (votre application flask) et le client (navigateur) se font par requête et réponse. Lorsque l'utilisateur a appuyé sur le bouton soumettre dans votre formulaire, son navigateur envoie une demande avec ce formulaire à votre serveur (application flask), et vous pouvez obtenir le contenu du formulaire comme:

request.args.get('form_name')

1

En supposant que vous savez déjà comment écrire une vue en Flaskrépondant à une URL, créer un qui lit les request.postdonnées. Pour ajouter les input boxdonnées à ce message, créez un formulaire sur votre page avec la zone de texte. Vous pouvez ensuite utiliser jquerypour faire

var data = $('#<form-id>').serialize()

puis postez sur votre vue de manière asynchrone en utilisant quelque chose comme ci-dessous.

$.post('<your view url>', function(data) {
  $('.result').html(data);
});

0

Cela a fonctionné pour moi.

def parse_data():
    if request.method == "POST":
        data = request.get_json()
        print(data['answers'])
        return render_template('output.html', data=data)
$.ajax({
      type: 'POST',
      url: "/parse_data",
      data: JSON.stringify({values}),
      contentType: "application/json;charset=utf-8",
      dataType: "json",
      success: function(data){
        // do something with the received data
      }
    });
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.