时间戳

首页 > 解决方案 > JQuery - 无法将数据设置为 Firebase

javascript - JQuery - 无法将数据设置为 Firebase

问题描述

出于某种原因，我无法将数据设置为 firebase 实时数据库。该函数按预期工作，值存储在 vars 中，并且没有出现错误……数据不会上传到 firebase 实时数据库。

js代码：

$(document).ready(function(){

document.getElementById('submitEmplyee').onclick = function()
{
    idNumberVal = document.getElementById('IDNum').value;
    nameVal = document.getElementById('Name').value;
    addressVal = document.getElementById('Address').value;
    telephoneVal = document.getElementById('telephone').value;
    //Ready();
    firebase.database().ref('employe/' + nameVal).set({

        EmplyeeID: idNumberVal,
        NameOfEmp: nameVal,
        AddressOfEmp: addressVal,
        TelephoneOfEmp: telephoneVal 
    });
    //alert("New HighScore !!!");
    
    
}

资料来源：

<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script> 
    <script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
    <script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="logic.js"></script>

完整的 HTML 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>David Frucht CRUD app</title>


    
    
</head>
<body>

   
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">        

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <div class="container">
        <h1>Emplyee Information</h1>
        <button id="newEmployeBtn" class="btn btn-primary btn-block">New Emplyee</button><br /><br />
        <form id="newForm">
          <div class="form-group row">
            <label for="IDNum" class="col-sm-2 col-form-label">ID Number</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="IDNum" placeholder="ID Number">
              </div>
          </div>
          <div class="form-group row">
            <label for="Name" class="col-sm-2 col-form-label">Name</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="Name" placeholder="Name">
              </div>
          </div>
          <div class="form-group row">
            <label for="Address" class="col-sm-2 col-form-label">Address</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="Address" placeholder="Address">
              </div>
          </div>
          <div class="form-group row">
            <label for="telephone" class="col-sm-2 col-form-label">Telephone Number</label>
              <div class="col-sm-10">
                <input type="text" class="form-control" id="telephone" placeholder="Telephone Number">
              </div>
          </div>
          <button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>
        </form>
        
        <table id="emplyesTable" class="table table-bordered table-hover">
            <thead>
                <th>Emplyee ID</th>
                <th>Name</th>
                <th>Address</th>
                <th>Telephone</th>
              <!--  <th>DB ID</th>
                <th>Controls</th>-->
            </thead>
            <tbody id="employeBody"></tbody>
        </table>
    </div>

    <script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script> 
    <script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
    <script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="logic.js"></script>
</body>

标签： javascriptjqueryfirebase

解决方案

我没有测试您的代码，但您的问题的原因很可能是您的表单是在set()触发 Firebase 方法之前提交的。

事实上，你声明你的按钮如下：

<button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>

如W3 规范中关于按钮类型的详细说明，“缺失值默认为提交按钮状态”和“如果类型属性处于提交按钮状态，则该元素具体为提交按钮”。

因此，如果您button向按钮添加类型，如下所示，它应该可以解决您的问题。

<button id="submitEmplyee" type="button" class="btn btn-primary">Add to DB</button>

推荐阅读