将数据从文本框发送到Flask?

时间:2012-09-05 09:05:38

标签: python flask

我想知道是否有办法从HTML中的文本框中取出某些东西,将其输入烧瓶,然后用Python解析该数据。我以为这可能涉及一些JS,但我可能是错的。有什么想法吗?

5 个答案:

答案 0 :(得分:109)

除非您想要做一些更复杂的事情,否则将数据从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

这是关于accessing request data的Flask文档。

如果您需要更复杂的需要验证的表单,那么您可以查看WTFormshow to integrate them with Flask

注意:除非您有任何其他限制,否则您根本不需要JavaScript 发送您的数据(尽管您可以使用它)。

答案 1 :(得分:9)

声明Flask端点以接受POST输入类型,然后执行必要的步骤。使用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 :(得分:2)

服务器(您的烧瓶应用程序)和客户端(浏览器)之间的所有交互都按请求和响应进行。当用户在您的表单中点击按钮提交时,他的浏览器会将此表单的请求发送到您的服务器(烧瓶应用程序),您可以获得该表单的内容,如:

request.args.get('form_name')

答案 3 :(得分:1)

假设您已经知道如何Flask request.post响应网址,请创建一个读取input box数据的网址。要将jquery添加到此帖子数据,请在页面上使用文本框创建表单。然后,您可以使用var data = $('#<form-id>').serialize()执行

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

然后使用下面的内容异步发布到您的视图。

{{1}}

答案 4 :(得分: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
      }
    });