Flask后端如何获取Ajax提交的多表单中第二个表单的数据？

前端代码修正 #

你的前端代码存在几个关键问题，导致后端无法获取form2的数据：

1. 表单闭合标签错误：form1和form2的结束标签写成了<form>，应改为</form>
2. FormData获取ID错误：代码中用form-2查找表单，但实际ID是form2
3. 错误嵌套FormData：不能直接将一个FormData对象作为值append到另一个FormData中，需遍历条目逐个添加
4. Ajax参数变量名不匹配：send_request_to_flask函数中误用全局变量form_data，应使用传入的参数form_data_parameter

修正后的前端代码：

<html>
<body>
<form id="form1">
  <input type="file" name="file[]" multiple id="file-input" />
</form>

<form id="form2">
  <div class="preference">
      <label for="cheese">Do you like cheese?</label>
      <input type="checkbox" name="cheese" id="cheese">
  </div>
  <select name="course">
    <option value="1">HTML</option>
    <option value="2">CSS</option>
    <option value="3">JAVA SCRIPT</option>
  </select>
</form>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

<script>
$("input[type='file']").on("change", function(ev) {
  ev.preventDefault();
  var form_data = new FormData()
  var all_files = document.querySelector('input[type=file]').files
  var totalfiles = all_files.length;
      
  for (var i = 0; i < totalfiles; i++) {
    console.log(all_files[i]);
    form_data.append("files[]", all_files[i]);
    console.log("Added " + (1 + i)+ " files in formdata");
  }
    
  console.log("added all files completely! ...appending advance options");
  // 修正ID并遍历form2的FormData条目
  var formdata2 = new FormData(document.getElementById('form2'));
  for (let [key, value] of formdata2.entries()) {
    form_data.append(key, value);
  }
    
  console.log("successfully appended..calling ajax func");
  send_request_to_flask(form_data);
});
</script>

<script>
function send_request_to_flask(form_data_parameter){
  $.ajax({
    url: "http://127.0.0.1:5000",
    type: "POST",
    data: form_data_parameter, // 修正为函数传入的参数
    contentType: false,
    cache: false,
    dataType: 'json',
    processData:false,
    withCredentials:true,
    xhr: function() {  
      var xhr = $.ajaxSettings.xhr();
      if(xhr.upload){ 
        xhr.upload.addEventListener('progress', function(event){
          var percent = 0;
          if (event.lengthComputable) {
              percent = Math.ceil(event.loaded / event.total * 100);
          }
          console.log(percent)
        }, false);
      }
      return xhr;
    },
    success: function (msg) {
      console.log(msg)
    },
    error: function(data){
      console.log(data);
    }
  });
}
</script>
</body>
</html>

Flask后端获取数据的方法 #

在Flask视图函数中，通过request.files获取文件，通过request.form获取表单字段：

from flask import Flask, request, jsonify

app = Flask(__name__)

@app.route('/', methods=['POST'])
def handle_upload():
    # 获取上传的文件列表
    files = request.files.getlist('files[]')
    # 获取form2的表单数据
    cheese = request.form.get('cheese')  # 复选框选中时返回'on'，未选中则为None
    course = request.form.get('course')  # 下拉框的选中值
    
    # 处理逻辑示例
    result = {
        "file_count": len(files),
        "likes_cheese": cheese is not None,
        "selected_course": course
    }
    return jsonify(result)

if __name__ == '__main__':
    app.run(debug=True)

内容的提问来源于stack exchange，提问作者shank sharma