Web表单中单选按钮提交产品名称和价格至数据库的实现方法
在电商类网站的开发中，经常需要让用户通过单选按钮选择目标商品，同时将商品对应的名称和价格传递到后端并存入数据库。很多开发者在实现这个功能时，容易只获取到单选按钮的value值，忽略了关联的商品信息，本文将详细说明完整的实现思路与代码示例。
实现思路梳理
核心逻辑分为三步：首先在前端表单中，为每个商品对应的单选按钮设置合理的value值，同时关联存储商品名称和价格；其次提交表单时，将选中的单选按钮对应的完整商品信息传递到后端；最后后端接收数据后，调用数据库操作接口将信息存入对应表结构中。
- 前端需保证单选按钮的value唯一，且与商品名称、价格建立对应关系
- 后端接收参数后需要校验数据合法性，避免无效数据入库
- 数据库表需提前设计好存储商品名称、价格的字段
前端表单实现
前端可以使用隐藏域配合单选按钮的方式，将商品名称和价格一并传递。假设我们有三个商品，每个商品有唯一ID、名称和价格，单选按钮的value可以设置为商品ID，同时通过隐藏域存储对应的名称和价格，提交时后端可以根据ID匹配，也可以直接将名称和价格作为单选按钮的value组合传递，这里以组合传递为例，用分隔符隔开不同字段。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>商品选择表单</title>
</head>
<body>
<form action="/submit-product" method="post">
<h3>请选择要购买的商品：</h3>
<!-- 单选按钮的value格式为：商品名称|价格，提交后后端可以按|分割获取两个字段 -->
<div>
<input type="radio" id="product1" name="product_info" value="无线鼠标|89.9" required>
<label for="product1">无线鼠标 - 89.9元</label>
</div>
<div>
<input type="radio" id="product2" name="product_info" value="机械键盘|249.9" required>
<label for="product2">机械键盘 - 249.9元</label>
</div>
<div>
<input type="radio" id="product3" name="product_info" value="便携显示器|1299.0" required>
<label for="product3">便携显示器 - 1299.0元</label>
</div>
<div style="margin-top: 20px;">
<button type="submit">提交订单</button>
</div>
</form>
</body>
</html>上面的代码中，每个<input type="radio">标签的value都包含了商品名称和价格，用竖线作为分隔符，这样提交表单时，选中的单选按钮的value会作为product_info参数传递到后端。
后端处理逻辑（以Python Flask为例）
后端接收到product_info参数后，先按分隔符拆分得到商品名称和价格，再校验数据格式，最后调用数据库操作接口存入数据。这里使用Flask框架，数据库以SQLite为例，提前创建好名为orders的表，包含id、product_name、price、create_time四个字段。
from flask import Flask, request, jsonify
import sqlite3
from datetime import datetime
app = Flask(__name__)
def init_db():
# 初始化数据库，创建订单表
conn = sqlite3.connect('shop.db')
cursor = conn.cursor()
cursor.execute('''
CREATE TABLE IF NOT EXISTS orders (
id INTEGER PRIMARY KEY AUTOINCREMENT,
product_name TEXT NOT NULL,
price REAL NOT NULL,
create_time TEXT NOT NULL
)
''')
conn.commit()
conn.close()
@app.route('/submit-product', methods=['POST'])
def submit_product():
# 获取前端传递的商品信息参数
product_info = request.form.get('product_info')
if not product_info:
return jsonify({'code': 400, 'msg': '未选择商品'})
# 按分隔符拆分商品名称和价格
try:
product_name, price = product_info.split('|')
# 校验价格是否为合法数字
price = float(price)
except Exception:
return jsonify({'code': 400, 'msg': '商品信息格式错误'})
# 插入数据到数据库
conn = sqlite3.connect('shop.db')
cursor = conn.cursor()
create_time = datetime.now().strftime('%Y-%m-%d %H:%M:%S')
cursor.execute(
'INSERT INTO orders (product_name, price, create_time) VALUES (?, ?, ?)',
(product_name, price, create_time)
)
conn.commit()
order_id = cursor.lastrowid
conn.close()
return jsonify({'code': 200, 'msg': '提交成功', 'order_id': order_id})
if __name__ == '__main__':
init_db()
app.run(host='127.0.0.1', port=5000, debug=True)上述代码中，首先通过request.form.get('product_info')获取前端传递的参数，拆分后校验合法性，再调用SQLite的插入语句将数据存入orders表，最后返回操作结果。
数据库验证
提交表单后，可以连接SQLite数据库查看orders表的数据，确认商品名称和价格是否正确存入。例如选择"机械键盘"提交后，表中会出现一条product_name为"机械键盘"、price为249.9的记录。
如果使用其他后端语言如Java、PHP，逻辑也是类似的：先接收参数，拆分字段，校验数据，再执行数据库插入操作。需要注意不同语言的表单参数获取方式、数据库操作语法会有差异，但核心流程保持一致。
注意事项
- 分隔符选择时避免使用商品名称或价格中可能出现的字符，比如如果商品价格可能包含竖线，可以换成其他不常用字符如
## - 生产环境中需要对用户输入做更严格的校验，避免SQL注入等安全问题，上述示例仅做演示，未做防注入处理
- 如果商品数量较多，建议单选按钮的value仅存商品ID，后端根据ID从商品表中查询对应的名称和价格，避免前端传递的数据被篡改