无法通过JavaScript向Python Flask传递表单数据：无刷新无提交按钮场景下XMLHttpRequest数据接收失败问题

看起来你的问题出在XMLHttpRequest发送数据的方式不对，导致Flask的request.form无法解析到你传递的MM值。咱们一步步来修复：

问题根源 #

你当前的JS代码里直接把DOM元素e.target传给了request.send()，这并不是后端能识别的表单数据格式。而且没有设置正确的请求头，Flask不知道该怎么解析你发送的数据，所以request.form.get('MM')返回None。

修复方案 #

1. 修改JavaScript代码 #

你需要把输入的值打包成表单格式（推荐用FormData，或者urlencoded字符串），同时设置正确的请求头：

方法一：使用FormData（更简洁）

var input = document.getElementById('MM')
input.addEventListener('keyup', e => {
  var mm_name = e.target.value
  const request = new XMLHttpRequest()
  request.open('POST', "/Enter", true)
  
  // 创建FormData并添加数据
  const formData = new FormData()
  formData.append('MM', mm_name)
  
  request.send(formData)
  console.log(mm_name)
})

方法二：使用urlencoded格式（手动构造）

如果你不想用FormData，也可以手动构造urlencoded字符串，同时设置Content-Type：

var input = document.getElementById('MM')
input.addEventListener('keyup', e => {
  var mm_name = e.target.value
  const request = new XMLHttpRequest()
  request.open('POST', "/Enter", true)
  
  // 设置请求头，告诉后端数据是urlencoded格式
  request.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  
  // 构造数据字符串，注意编码特殊字符
  const data = `MM=${encodeURIComponent(mm_name)}`
  
  request.send(data)
  console.log(mm_name)
})

2. 优化Flask后端代码 #

你的Flask代码逻辑没问题，但可以加个响应返回，避免前端XMLHttpRequest出现错误：

from flask import Flask, request, jsonify

@app.route('/Enter', methods = ['POST','GET'])
def enter_case():
  if request.method == 'POST':
    MM = request.form.get('MM')
    print(MM)
    # 返回响应给前端，避免请求报错
    return jsonify({"status": "success", "received_MM": MM})
  return "GET request received"

额外小提示 #

• keyup事件会在每次按键时发送请求，可能产生大量无效请求，你可以添加防抖（debounce）函数，比如等用户停止输入1秒后再发送，减轻服务器压力。
• 确保你的Flask应用没有自定义修改请求解析的配置，默认配置已经支持表单数据解析。

这样修改后，Flask后端应该就能正确打印出你输入的MM值了！

内容的提问来源于stack exchange，提问作者Selcem artan