Flask如何接收前端ajax传来的表单(包含文件)

要让Flask能够接收前端Ajax传来的表单数据（包括文件），需要注意以下几个步骤：

1. 在前端使用ajax请求时，需要将请求内容以FormData的形式打包，以支持传输文件。

2. 在Flask后端，需要使用request.form和request.files两个对象分别获取表单字段和文件数据。

3. 某些情况下，上传文件时需要设置Flask应用程序的配置，以支持文件上传。例如，需要使用app.config[‘UPLOAD_FOLDER’]参数来指定保存上传文件的目录。

下面我们通过示例来详细讲解Flask如何接收前端ajax传来的表单数据（包含文件）：

1. 示例1 - Ajax上传文件

前端代码示例如下，我们可以通过查找input标签来确定需要上传的文件：

<form id="myform" enctype="multipart/form-data">
  <input type="text" name="title">
  <input type="file" name="file">
  <button type="button" id="submitBtn">提交</button>
</form>

<script>
$(document).on('click', '#submitBtn', function() {
  var form_data = new FormData();
  form_data.append('title', $('#myform input[name=title]').val());
  form_data.append('file', $('#myform input[name=file]')[0].files[0]);

  $.ajax({
    url: '/upload',
    type: 'POST',
    data: form_data,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log(data);
    }
  });
});
</script>

在Flask后端，可以通过request.form和request.files对象分别获取表单字段和文件数据：

@app.route('/upload', methods=['POST'])
def upload():
    title = request.form.get('title')
    file = request.files.get('file')

    # 保存上传的文件
    file.save(os.path.join(app.config['UPLOAD_FOLDER'], file.filename))

    return '上传成功！'

需要注意的是，在上传文件前需要设置Flask应用程序的配置，以支持文件上传：

import os
from flask import Flask, request

app = Flask(__name__)
app.config['UPLOAD_FOLDER'] = '/path/to/upload/folder'

1. 示例2 - Ajax提交表单

在某些情况下，我们需要使用Ajax方式提交表单数据（例如，页面不需要刷新）。在这种情况下，我们不需要设置额外的参数，直接使用FormData即可，示例代码如下：

<form id="myform">
  <input type="text" name="username">
  <input type="submit" value="提交">
</form>

<script>
$(document).on('submit', '#myform', function(event) {
  event.preventDefault();

  var form_data = new FormData();
  form_data.append('username', $('#myform input[name=username]').val());

  $.ajax({
    url: '/submit',
    type: 'POST',
    data: form_data,
    cache: false,
    processData: false,
    contentType: false,
    success: function(data) {
      console.log(data);
    }
  });
});
</script>

在Flask后端，可以通过request.form对象获取表单字段：

@app.route('/submit', methods=['POST'])
def submit():
    username = request.form.get('username')

    return '提交成功！'

以上就是Flask如何接收前端ajax传来的表单数据的完整攻略，希望对你有所帮助。