使用JQuery实现Firebase实时数据库表单提交遇数据写入失败问题

当使用type="submit"按钮提交表单时，浏览器会触发默认表单提交行为——刷新页面或跳转至表单指定的action地址。而Firebase Realtime Database的set方法是异步操作，页面刷新会直接中断这个异步请求，导致数据还没来得及写入数据库就终止，这就是数据未写入的核心原因。

改成type="button"后，按钮不会触发表单默认提交行为，页面不刷新，异步操作能顺利完成，所以数据可以写入，但同时也失去了表单提交的默认行为（比如页面跳转、传统表单数据提交）。

核心思路是：先阻止表单默认提交行为，让Firebase异步操作完成后，再根据需求决定是否手动触发表单提交。

方案一：修改onSubmit事件处理逻辑 #

在事件函数中先阻止默认行为，Firebase写入成功后再手动提交表单（如果需要默认提交行为的话）：

<script type="module">
  const fname = $(".fname");
  const lname = $(".lname");
  const form = $("form");

  function insertDB(e) {
    // 阻止表单默认提交行为
    e.preventDefault();
    
    // 执行Firebase写入，用Promise处理异步结果
    set(ref(db, "/docHR/empProfiles/"), {
      fname: fname.val(),
      lname: lname.val(),
    })
    .then(() => {
      console.log("数据写入成功");
      // 手动触发表单默认提交（如需要页面跳转等行为）
      form[0].submit();
    })
    .catch((error) => {
      console.error("数据写入失败:", error);
    });
  }
</script>

<form onSubmit="insertDB(event)">
  <input type="text" class="fname">
  <input type="text" class="lname">
  <button type="submit" class="btnSubmit">Submit</button>
</form>

方案二：使用jQuery绑定点击事件 #

通过jQuery绑定按钮点击事件，同样先阻止默认行为，完成写入后再提交表单：

<script type="module">
  const fname = $(".fname");
  const lname = $(".lname");
  const form = $("form");

  function insertDB() {
    return set(ref(db, "/docHR/empProfiles/"), {
      fname: fname.val(),
      lname: lname.val(),
    });
  }

  $(".btnSubmit").click(function(e) {
    // 阻止按钮触发的默认提交行为
    e.preventDefault();
    
    insertDB()
    .then(() => {
      console.log("数据写入成功");
      // 手动提交表单
      form[0].submit();
    })
    .catch((error) => {
      console.error("数据写入失败:", error);
    });
  });
</script>

<form>
  <input type="text" class="fname">
  <input type="text" class="lname">
  <button type="submit" class="btnSubmit">Submit</button>
</form>

关键注意事项 #

• 必须调用e.preventDefault()阻止默认提交行为，确保Firebase的异步操作能完整执行。
• Firebase的set方法返回Promise，利用then/catch可以明确处理成功和失败场景，避免隐藏错误。
• 如果不需要表单的默认提交行为（仅需写入数据库），可以省略手动提交表单的步骤，只保留阻止默认行为和Firebase写入逻辑。

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