提交表单数据至数据库后保持表单不关闭的实现方法

核心问题在于你当前用了页面跳转的方式提交数据，刷新后原来打开的表单会因为页面重置而关闭。要解决这个问题，我们可以改用AJAX异步提交，让数据在后台发送，页面不刷新，从而保持当前表单的显示状态。

下面是具体的实现步骤：

1. 修改前端表单，移除跳转相关属性 #

首先，给所有表单添加一个统一的类（比如dynamic-form），方便我们用JS统一监听提交事件；同时移除表单的action属性和onsubmit的跳转逻辑（如果需要保留表单验证，可以把验证逻辑移到JS里）：

<!-- 卫生产品新增表单 -->
<section class="hide-section" id="produto_1">
  <form id="form3" class="dynamic-form" method="POST">
    <!-- 表单原有内容不变 -->
    <button type="submit" name="submit" class="botao submit">Registo</button>
  </form>
</section>

<!-- 卫生产品入库表单 -->
<section class="hide-section" id="produto_2">
  <form name="form4" class="dynamic-form" method="POST">
    <!-- 表单原有内容不变 -->
    <button type="submit" name="submit1" class="botao submit">Registo</button>
  </form>
</section>

<!-- 营养产品新增表单 -->
<section class="hide-section" id="produto_3">
  <form id="form3" name="form3" class="dynamic-form" method="POST">
    <!-- 表单原有内容不变 -->
    <button type="submit" name="submit2" class="botao submit">Registo</button>
  </form>
</section>

2. 编写AJAX提交的JavaScript代码 #

添加一段JS，监听所有表单的提交事件，用Fetch API异步发送数据，同时阻止默认的页面跳转：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
  // 监听所有带dynamic-form类的表单
  document.querySelectorAll('.dynamic-form').forEach(form => {
    form.addEventListener('submit', async function(e) {
      e.preventDefault(); // 阻止默认表单提交跳转

      // 可选：保留原有的表单验证逻辑
      if (!form_validation()) {
        alert('Por favor, preencha todos os campos obrigatórios!');
        return;
      }

      // 收集表单数据
      const formData = new FormData(this);

      try {
        // 发送POST请求到teste2
        const response = await fetch('./teste2', {
          method: 'POST',
          body: formData
        });

        // 解析后台返回的JSON响应
        const result = await response.json();

        if (result.success) {
          alert('Dados registados com sucesso!');
          this.reset(); // 可选：提交成功后重置表单内容
          // 页面没有刷新，当前打开的表单会自动保持显示状态
        } else {
          alert('Erro ao registar: ' + result.message);
        }
      } catch (error) {
        alert('Erro na conexão: ' + error.message);
      }
    });
  });
});

3. 修改teste2页面，返回JSON响应而非跳转 #

原来的teste2页面用JS跳转回test1，现在我们需要改成返回JSON格式的结果，告诉前端提交是否成功：

<?php
// 假设你的数据库连接是$conn，确保已正确初始化

// 初始化响应数据
$response = [
  'success' => false,
  'message' => 'Ação não reconhecida'
];

// 处理卫生产品新增
if (isset($_POST['submit'])) {
  // 用预处理语句防止SQL注入！非常重要
  $sql = "INSERT INTO ProdHigieneteste (DescricaoProd, DescricaoUnid) VALUES (?, ?)";
  $stmt = $conn->prepare($sql);
  $stmt->bind_param("ss", $_POST['DescricaoProd'], $_POST['DescricaoUnid']);

  if ($stmt->execute()) {
    $response['success'] = true;
    $response['message'] = 'Produto de higiene adicionado com sucesso';
  } else {
    $response['message'] = 'Erro na base de dados: ' . $conn->error;
  }
}

// 处理卫生产品入库
elseif (isset($_POST['submit1'])) {
  $sql = "INSERT INTO 你的入库表名 (DataEntrada, IDProd, DescricaoUnid, Quantidade, Preco) VALUES (?, ?, ?, ?, ?)";
  $stmt = $conn->prepare($sql);
  // 根据你的数据库字段类型调整参数类型（s=字符串, i=整数, d=小数）
  $stmt->bind_param("sisi d", $_POST['DataEntrada'], $_POST['Produto'], $_POST['Unid'], $_POST['Quantidade'], $_POST['Preco']);

  if ($stmt->execute()) {
    $response['success'] = true;
    $response['message'] = 'Entrada de produto registada com sucesso';
  } else {
    $response['message'] = 'Erro na base de dados: ' . $conn->error;
  }
}

// 处理营养产品新增
elseif (isset($_POST['submit2'])) {
  $sql = "INSERT INTO 你的营养产品表名 (ProdNutricia) VALUES (?)";
  $stmt = $conn->prepare($sql);
  $stmt->bind_param("s", $_POST['ProdNutricia']);

  if ($stmt->execute()) {
    $response['success'] = true;
    $response['message'] = 'Produto nutricional adicionado com sucesso';
  } else {
    $response['message'] = 'Erro na base de dados: ' . $conn->error;
  }
}

// 设置响应头为JSON
header('Content-Type: application/json');
// 返回JSON数据
echo json_encode($response);
?>

关键注意事项 #

• 防止SQL注入：一定要用预处理语句（prepare + bind_param），不要直接把用户输入拼到SQL语句里，避免安全风险。
• 表单验证：如果你原来的form_validation()函数有验证逻辑，要确保它在AJAX提交前执行，避免无效数据提交到后台。
• 错误处理：代码里加入了基本的错误提示，你可以根据需求改成更友好的提示（比如用页面内的提示框代替alert）。

这样修改后，表单提交时页面不会刷新，当前打开的表单会保持显示状态，同时数据也能成功插入数据库。

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