텍스트 상자에서 Flask로 데이터를 보내시겠습니까?


92

HTML의 텍스트 상자에서 무언가를 가져 와서 플라스크에 넣은 다음 해당 데이터를 Python으로 구문 분석하는 방법이 있는지 궁금합니다. 나는 이것이 일부 JS를 포함 할 것이라고 생각했지만 틀릴 수 있습니다. 어떤 아이디어?


HTML 양식을 사용하여 직접 게시하지 않는 이유는 무엇입니까? 아니면 비동기식으로해야합니까? 이 경우 AJAX에 대해 읽을 수 있습니다. :-)
Martijn Pieters

1
HTML 양식을 사용할 수 있다는 것을 알고 있지만 해당 정보를 플라스크 앱에 어떻게 전달합니까?
ollien 2009 년

답변:


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 문서입니다. 입니다.

유효성 검사가 필요한 더 복잡한 양식이 필요한 경우 WTFormsFlask와 통합하는 방법을 살펴볼 수 있습니다 .

참고 : 다른 제한 사항이없는 한 데이터를 전송하는 데 JavaScript 가 전혀 필요하지 않습니다 (사용할 수는 있지만).


1
한 번 작동했지만 이제 500 오류가 발생합니다. 아이디어가 있습니까?
ollien

잘 작동해야합니다 ... app.debug = True바로 전에 app.run()넣어서 오류의 예외와 역 추적을 얻습니다.
pacha

그래, 나는 그것을 잊었다. 나는 바보 였고 내 HTML을 내 템플릿 폴더에 넣는 것을 잊었다.
ollien

누군가 Flask를 사용하여이 작업을 수행해야하는 경우 텍스트 상자 대신 더 큰 텍스트 영역으로이 작업을 수행하는 데 약간의 시간을 낭비했습니다. 솔루션이 있습니다
cardamom

@cardamom 나는 당신이 의미하는 바를 정말로 이해하지 못합니다. 텍스트 영역을 사용하거나 텍스트 유형을 입력해도 어떤 식 으로든 솔루션이 변경되지 않습니다 (연결하는 솔루션이이 솔루션과 정확히 동일 함). 당신은 대체, 파이썬 측을 변경할 필요가 없습니다 <input type="text" name="text">에 의해 <textarea name="text"></textarea>당신도 잘해야합니다.
pacha

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

서버 (플라스크 앱)와 클라이언트 (브라우저) 간의 모든 상호 작용은 요청 및 응답으로 진행됩니다. 사용자가 양식에서 제출 버튼을 누르면 브라우저가이 양식을 사용하여 서버 (flask 앱)에 요청을 보내면 다음과 같은 양식의 콘텐츠를 얻을 수 있습니다.

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.