在Flask Web开发中，前端页面按钮的变量值传递到后端是常见的功能需求，比如点击不同按钮触发不同的业务逻辑，或者传递按钮对应的标识参数到后端处理。实现这一功能需要结合前端HTML、JavaScript和后端Flask路由的配合，下面分步骤讲解具体实现方法。
基础实现：通过表单提交传递按钮值
如果按钮的作用是提交表单，可以直接将变量值作为按钮的value属性，通过表单的POST请求传递到后端。这种方式不需要额外的JavaScript代码，适合简单的提交场景。
前端HTML代码
首先创建一个包含按钮的表单，设置表单的提交地址为对应的Flask路由，提交方法为POST：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>按钮传值示例</title>
</head>
<body>
<form action="/handle_button" method="post">
<!-- 按钮的name属性是后端获取参数的key，value是传递的变量值 -->
<button type="submit" name="btn_value" value="value_1">按钮1</button>
<button type="submit" name="btn_value" value="value_2">按钮2</button>
<button type="submit" name="btn_value" value="value_3">按钮3</button>
</form>
</body>
</html>
后端Flask接收代码
在Flask路由中，通过request.form获取前端传递的按钮值，注意需要指定请求方法包含POST：
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
@app.route('/handle_button', methods=['POST'])
def handle_button():
# 获取按钮传递的变量值，name对应前端按钮的name属性
btn_value = request.form.get('btn_value')
return f'后端接收到的按钮值为：{btn_value}'
if __name__ == '__main__':
app.run(debug=True)
进阶实现：普通按钮通过JavaScript传值
如果按钮不需要提交整个表单，只是普通的功能按钮，可以通过JavaScript获取按钮的自定义属性值，再通过AJAX请求传递到后端。
前端HTML和JavaScript代码
给按钮添加自定义属性存储变量值，绑定点击事件，点击时获取属性值并发送请求：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>普通按钮传值示例</title>
</head>
<body>
<!-- 自定义data-value属性存储要传递的变量值 -->
<button class="func-btn" data-value="param_1">功能按钮1</button>
<button class="func-btn" data-value="param_2">功能按钮2</button>
<button class="func-btn" data-value="param_3">功能按钮3</button>
<script>
// 给所有功能按钮绑定点击事件
document.querySelectorAll('.func-btn').forEach(btn => {
btn.addEventListener('click', function() {
// 获取按钮的data-value属性值，即要传递的变量
const btnParam = this.getAttribute('data-value');
// 发送POST请求到后端
fetch('/handle_ajax', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
btn_param: btnParam
})
})
.then(response => response.text())
.then(data => {
alert(data);
});
});
});
</script>
</body>
</html>
后端Flask接收AJAX请求代码
后端需要接收JSON格式的数据，通过request.get_json()获取参数：
from flask import Flask, request, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index2.html')
@app.route('/handle_ajax', methods=['POST'])
def handle_ajax():
# 获取前端传递的JSON数据
json_data = request.get_json()
btn_param = json_data.get('btn_param')
return f'后端接收到的AJAX按钮参数为：{btn_param}'
if __name__ == '__main__':
app.run(debug=True)
常见问题和注意事项
- 如果后端无法获取到参数，首先检查前端表单的
method是否为POST，或者AJAX请求的Content-Type是否正确设置。 - 使用表单提交时，只有被点击的按钮的
value会被传递到后端，其他同name的按钮值不会被提交。 - 如果按钮的变量值包含特殊字符，前端发送前可以做URL编码，后端接收后再解码处理。
- 开发时建议开启Flask的
debug模式，方便排查参数传递过程中的错误。