Flask实现点击按钮获取HTML按钮ID值的技术求助

嘿，我完全懂你的困惑——刚接触前后端交互的时候，很容易搞不清前端数据怎么传给后端。首先明确一点：Flask没办法直接读取前端HTML标签的属性值，因为前端页面是在用户浏览器里渲染的，Flask作为后端，只有当前端主动把数据发过来的时候才能拿到。所以你确实需要配合JavaScript来实现这个需求，下面给你具体的步骤：

第一步：修改HTML，用JS发送按钮ID到后端 #

你需要给按钮添加点击事件，当用户点击时，通过JavaScript把按钮的ID以请求的形式发给Flask。可以用fetch API（现代浏览器都支持）来实现：

<tr>
  <td>
    <button id="socks.shirt.pants" onclick="sendButtonId(this.id)"> dummy text here </button>
  </td>
</tr>

<script>
function sendButtonId(buttonId) {
  // 发送POST请求到Flask的根路由
  fetch('/', {
    method: 'POST',
    // 告诉后端我们发的是JSON数据
    headers: {
      'Content-Type': 'application/json',
    },
    // 把按钮ID打包成JSON格式
    body: JSON.stringify({ button_id: buttonId }),
  })
  .then(response => response.json())
  .then(data => {
    console.log('后端返回的数据:', data);
    // 这里可以加成功后的提示，比如alert(`成功发送ID：${data.received_id}`)
  })
  .catch((error) => {
    console.error('发送请求出错:', error);
  });
}
</script>

第二步：修改Flask代码，接收并处理按钮ID #

原来的Flask代码需要区分GET和POST请求：GET请求返回HTML页面，POST请求接收前端传过来的JSON数据。修改后的代码如下：

from flask import Flask, send_from_directory, request, jsonify

app = Flask(__name__)

@app.route('/', methods=['GET', 'POST'])
def index():
    if request.method == 'GET':
        # GET请求时返回你的HTML文件
        return send_from_directory('', 'myfile.html')
    elif request.method == 'POST':
        # 解析前端发来的JSON数据
        request_data = request.get_json()
        button_id = request_data.get('button_id')
        
        # 这里可以对button_id做你需要的操作，比如打印、存储等
        print(f"收到的按钮ID：{button_id}")
        
        # 返回一个响应给前端，告诉它请求成功
        return jsonify({"status": "success", "received_id": button_id})

为什么你之前的方法没用？ #

你尝试的request.htmlcontent.td.id、request.html.tr.id这些属性根本不存在——Flask的request对象只包含前端发送的请求数据（比如表单、JSON、URL参数等），不是整个HTML文档的内容。而request.form是专门用来接收<form>标签提交的表单数据的，你的按钮不在表单里，所以自然拿不到数据。

另外，如果你不想用JS，也可以把按钮放到表单里，用隐藏输入框存按钮ID，但JS的方式更灵活，适合这种非表单的交互场景。

如果还有不清楚的地方，随时问——刚开始搞这些确实容易懵，慢慢来就好～

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