如何将无id/name的span值存入数据库？卡路里计算器存储问题

以下是几种可行的解决思路，按实现复杂度和安全性排序：

方法1：用隐藏表单字段同步计算结果 #

表单提交时只有带name属性的表单元素数据会被发送到后端，所以可以在表单内添加隐藏输入框，通过JavaScript将计算结果同步到这些字段中，让PHP能正常获取。

1. 在表单内部添加对应隐藏输入：

<form method="post" action="save-calories.php">
  <!-- 你的原有表单输入（体重、身高、年龄等） -->
  
  <!-- 添加隐藏字段用于存储计算结果 -->
  <input type="hidden" name="bulk_cal" id="bulk_cal">
  <input type="hidden" name="maintain_cal" id="maintain_cal">
  <input type="hidden" name="cut_cal" id="cut_cal">
  
  <button type="submit">保存数据</button>
</form>

2. 修改JavaScript计算逻辑，完成计算后同步结果到隐藏字段：

// 假设你已经完成卡路里计算，得到三个结果值
const bulkValue = 2600;
const maintainValue = 2100;
const cutValue = 1600;

// 更新页面上的span显示
document.querySelector('.results span:nth-child(1)').textContent = bulkValue;
document.querySelector('.results span:nth-child(2)').textContent = maintainValue;
document.querySelector('.results span:nth-child(3)').textContent = cutValue;

// 同步到隐藏输入框
document.getElementById('bulk_cal').value = bulkValue;
document.getElementById('maintain_cal').value = maintainValue;
document.getElementById('cut_cal').value = cutValue;

3. PHP后端直接通过$_POST获取值并存库：

$bulk = $_POST['bulk_cal'];
$maintain = $_POST['maintain_cal'];
$cut = $_POST['cut_cal'];

// 执行数据库插入操作（示例）
$pdo = new PDO('mysql:host=localhost;dbname=your_db', 'user', 'pass');
$stmt = $pdo->prepare("INSERT INTO calories (bulk, maintain, cut) VALUES (?, ?, ?)");
$stmt->execute([$bulk, $maintain, $cut]);

方法2：后端重新计算结果（更安全） #

前端计算的结果可能被篡改，更可靠的方式是把卡路里计算逻辑搬到PHP端，用表单提交的原始数据（体重、身高、活动水平等）重新计算一次，直接得到结果并存库。

1. 把JavaScript中的计算逻辑转换成PHP代码（以Mifflin-St Jeor代谢公式为例）：

// 获取表单提交的原始参数
$weight = (float)$_POST['weight'];
$height = (float)$_POST['height'];
$age = (int)$_POST['age'];
$gender = $_POST['gender'];
$activity = (float)$_POST['activity_level'];

// 计算基础代谢率（BMR）
if ($gender === 'male') {
    $bmr = 10 * $weight + 6.25 * $height - 5 * $age + 5;
} else {
    $bmr = 10 * $weight + 6.25 * $height - 5 * $age - 161;
}

// 计算各目标卡路里值
$maintainCal = $bmr * $activity;
$bulkCal = $maintainCal + 250; // 增肌额外加250大卡
$cutCal = $maintainCal - 250; // 减脂减少250大卡

// 存入数据库
// （此处写你的数据库插入代码）

这种方法无需依赖前端传递计算结果，避免了数据篡改风险，同时也解决了无法获取span内容的问题。

方法3：用FormData手动追加数据（进阶） #

如果不想添加隐藏字段，可以在表单提交时通过JavaScript创建FormData对象，手动把span中的计算结果追加进去：

document.querySelector('form').addEventListener('submit', function(e) {
    const formData = new FormData(this);
    
    // 获取span中的计算结果
    const bulkVal = document.querySelector('.results span.bulk').textContent;
    const maintainVal = document.querySelector('.results span.maintain').textContent;
    const cutVal = document.querySelector('.results span.cut').textContent;
    
    // 追加到FormData
    formData.append('bulk_cal', bulkVal);
    formData.append('maintain_cal', maintainVal);
    formData.append('cut_cal', cutVal);
    
    // 用fetch或XMLHttpRequest发送数据（若用默认表单提交则需修改提交逻辑）
    e.preventDefault();
    fetch('save-calories.php', {
        method: 'POST',
        body: formData
    });
});

后端同样通过$_POST['bulk_cal']等获取值，这种方式适合需要异步提交的场景。

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