テキストボックスからFlaskにデータを送信しますか?


92

HTMLのテキストボックスから何かを取り出してフラスコにフィードし、そのデータをPythonで解析する方法があるかどうか疑問に思いました。これにはJSが関係しているのではないかと思っていましたが、間違っている可能性があります。何か案は?


HTMLフォームを使用して直接POSTしてみませんか?または、これを非同期で行う必要がありますか?その場合、AJAXでやるべきことをいくらか読む必要があります。:-)
MartijnPieters

1
HTMLフォームを使用できることは知っていますが、その情報をフラスコアプリに渡すにはどうすればよいですか?
ollien 2012

回答:


154

もっと複雑なことをしたいのでなければ、HTMLフォームからFlaskにデータを送るのはとても簡単です。

  • POSTリクエストを受け入れるビューを作成します(my_form_post)。
  • 辞書のフォーム要素にアクセスし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

これは、リクエストデータへのアクセスに関するFlaskのドキュメントです。

検証が必要なより複雑なフォームが必要な場合は、WTFormsそれらをFlaskと統合する方法を確認できます。

注:他に制限がない限り、データを送信するためにJavaScriptはまったく必要ありません(使用することはできますが)。


1
ねえ、これは一度は機能しましたが、今はエラー500をスローします、何かアイデアはありますか?
ollien 2012

正常に動作しているはずです...例外とエラーのトレースバックを取得できるように、app.debug = True直前にapp.run()配置してください。
pacha 2012

ええ、私はそれを忘れていました。私はばかで、HTMLをテンプレートフォルダに入れるのを忘れていました。
ollien 2012

誰かがFlaskでこれを行う必要がある場合、テキストボックスの代わりに大きなテキストエリアでこれを行うのに少し時間を無駄にしました。解決策はここに
カルダモン2017年

@cardamom私はあなたが何を意味するのか本当にわかりません。textareaまたはtext型の入力を使用しても、ソリューションはまったく変更されません(リンクしているものはこれとまったく同じです)。Python側を変更する必要はありません。置き換えるだけで、問題<input type="text" name="text"><textarea name="text"></textarea>ありません。
pacha 2017年

9

POST入力タイプを受け入れるようにFlaskエンドポイントを宣言してから、必要な手順を実行します。jQueryを使用してデータを投稿します。

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

サーバー(フラスコアプリ)とクライアント(ブラウザー)間のすべての対話は、要求と応答によって行われます。ユーザーがフォームでボタンを送信すると、ブラウザーはこのフォームを使用してサーバー(フラスコアプリ)にリクエストを送信し、次のようなフォームのコンテンツを取得できます。

request.args.get('form_name')

1

URLに応答するビュー作成する方法をすでに知っていると仮定Flaskして、request.postデータを読み取るビューを作成します。input boxこの投稿データにを追加するには、テキストボックスを使用してページにフォームを作成します。その後、を使用jqueryして行うことができます

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

次に、以下のようなものを使用して非同期でビューに投稿します。

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

0

これは私のために働いた。

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
      }
    });
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.