HTML表单提交XAMPP数据库item为空、amount为0问题排查

你这个数据库写入异常（item字段为空、amount恒为0）和localStorage存储逻辑无关，核心原因是前端向后端传参的环节、或者后端接收/入库环节没有正确拿到表单值，按以下顺序逐段排查即可修复：

前端提交逻辑常见问题 #

• 检查表单input属性与参数名匹配度
  不要只给输入框加id，必须配置对应name属性，且提交时的参数名必须和PHP后端接收的字段名完全一致（大小写敏感）。标准输入框写法参考：

  <input type="text" id="item" name="item" placeholder="请输入条目名称">
  <input type="number" id="amount" name="amount" placeholder="请输入金额">
  

• 检查取值时机
  不要在页面初始化阶段就提前读取输入框的值存到变量里——这时候用户还没输入，变量存的永远是空值，提交时自然传空。必须把取值逻辑放到表单submit事件的回调内部，在提交瞬间读取最新输入值。

  这也是localStorage能存成功但后端存失败的最常见原因：写localStorage时是提交瞬间取的DOM值，发请求时用的是页面加载时存的空变量。
  错误写法示例：

  // 页面刚加载就取值，拿到的是空值
  const item = document.getElementById('item').value
  const amount = document.getElementById('amount').value
  form.addEventListener('submit', e => {
    e.preventDefault()
    // 发请求用的是提前存的空值
    fetch('save.php', {method:'POST', body: JSON.stringify({item, amount})})
    // 写localStorage时重新取了DOM值，所以能成功
    const curItem = document.getElementById('item').value
    const curAmount = document.getElementById('amount').value
    localStorage.setItem(...)
  })
  

  正确写法参考：

  form.addEventListener('submit', e => {
    e.preventDefault()
    // 提交瞬间读取最新输入值，顺便做格式校验
    const itemVal = document.getElementById('item').value.trim()
    const amountVal = Number(document.getElementById('amount').value)
    if (!itemVal || isNaN(amountVal) || amountVal <= 0) {
      alert('请输入有效的条目和金额')
      return
    }
    // 优先用FormData传参，不需要手动转JSON，PHP可以直接通过$_POST识别
    const fd = new FormData(form)
    fetch('save.php', {method: 'POST', body: fd})
    // 同步写入localStorage
    localStorage.setItem(`record_${Date.now()}`, JSON.stringify({item: itemVal, amount: amountVal}))
  })
  

• 排查请求格式不匹配问题
  如果你坚持用JSON格式传请求体，PHP默认不会从$_POST里解析JSON参数，需要额外加解析逻辑，否则永远拿不到传值。

后端PHP与数据库配置问题 #

• 先加参数校验与错误提示，快速定位接收问题
  不要拿到参数就直接拼SQL入库，先校验参数是否正常接收，参考代码：

  <?php
  // 开启错误显示，排查阶段用
  error_reporting(E_ALL);
  ini_set('display_errors', 1);
  // 如果前端传的是JSON格式请求，打开下面两行注释
  // $rawPost = file_get_contents('php://input');
  // $_POST = json_decode($rawPost, true) ?? [];
  // 接值时加默认兜底
  $item = trim($_POST['item'] ?? '');
  $amount = intval($_POST['amount'] ?? 0);
  if (empty($item) || $amount <= 0) {
    exit(json_encode([
      'code' => 400,
      'msg' => '参数异常',
      'received_params' => $_POST // 把实际收到的参数返回，方便排查
    ]));
  }
  // 数据库连接与入库，必须用预处理语句防SQL注入
  $conn = new mysqli('localhost', '你的数据库账号', '你的数据库密码', '你的库名');
  if ($conn->connect_error) {
    exit(json_encode(['code'=>500, 'msg'=>'数据库连接失败:'.$conn->connect_error]));
  }
  $stmt = $conn->prepare("INSERT INTO 你的表名 (item, amount) VALUES (?, ?)");
  // 绑定参数：s对应字符串类型的item，i对应整数类型的amount，如果存小数amount改成d
  $stmt->bind_param("si", $item, $amount);
  if ($stmt->execute()) {
    exit(json_encode(['code'=>200, 'msg'=>'入库成功']));
  } else {
    exit(json_encode(['code'=>500, 'msg'=>'入库失败:'.$stmt->error]));
  }
  ?>
  

• 核对数据库表结构
  打开phpMyAdmin检查目标表的字段类型：
  • item字段不能设为int、tinyint等数值类型，否则插入字符串时会自动转为0，推荐用varchar(255)类型、设置非空
  • amount字段如果要存整数用int类型，存小数用decimal(10,2)类型，不要用字符串类型存金额

快速定位技巧 #

打开浏览器F12开发者工具，切换到「网络」面板，触发表单提交后找到指向save.php的请求，查看请求载荷部分：

• 如果载荷里item、amount的值是空的，问题100%出在前端JS取值、传参逻辑
• 如果载荷里值正常，问题出在PHP接收逻辑或者数据库表字段配置上

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