无法将数据插入 firebase 实时数据库

Question

我正在尝试通过 web 应用程序输入然后从 firebase 实时数据库读取数据。 读取 function ( getData ) 工作完美，因为我已经通过输入测试数据对其进行了测试，但是输入 function ( submit ) 它不起作用。 这是完整的代码：

<html>
<head>
<title>firebase editable table </title>

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

</head>

<body>

<div class="col-md-6">
  <form>
    <div class="form-group">
    <label>First name</label>
    <input type="text" class="form-control" id="first-name" placeholder="first name">
  </div>
  <div class="form-group">
    <label>Last name</label>
    <input type="text" class="form-control" id="last-name" placeholder="last name">
  </div>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>
  <button type="submit" id="submit" class="btn btn-primary">Submit</button>
</form>
</div>

  <button type="submit" id="getData" class="btn btn-primary">Search data</button>

<div class="col-md-6">
<table class="table table-striped" id='dataTbl'>
  <thead>
    <tr>
      <th scope="col">#</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Handle</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>@mdo</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>@fat</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>@twitter</td>
    </tr>
  </tbody>
</table>
</div>


</body>
</html>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>

<script type="module">
  // Import the functions you need from the SDKs you need
    import { initializeApp } from "https://www.gstatic.com/firebasejs/9.8.1/firebase-app.js";
    import { getDatabase, set, ref ,push, child, onValue} from "https://www.gstatic.com/firebasejs/9.8.1/firebase-database.js";

  // TODO: Add SDKs for Firebase products that you want to use
  // https://firebase.google.com/docs/web/setup#available-libraries

  // Your web app's Firebase configuration
  const firebaseConfig = {

//here goes my firebase data


  };

  // Initialize Firebase
  const app = initializeApp(firebaseConfig);
  
  // Get a reference to the database service
  const database = getDatabase(app);
  // write data
 submit.addEventListener('click',(e) => {
    var firstName = document.getElementById('first-name').value;  
    var lastName = document.getElementById('last-name').value;  
    var email = document.getElementById('email').value;  

    const userId = push(child(ref(database), 'users')).key;
   
    set(ref(database, 'users/' + userId), {
    firstName: firstName,
    lastName: lastName,
    email : email
   });
   alert("data saved");
  });     

  // read data
  getData.addEventListener('click',(e) => {
    
    $('#dataTbl td').remove();
    var rowNum = 0; 
    //const dbRef = ref(database, 'Mensajes/');
    const dbRef = ref(database, 'users/');

    onValue(dbRef, (snapshot) => {
      snapshot.forEach((childSnapshot) => {
      const childKey = childSnapshot.key;
      const childData = childSnapshot.val();
      // ...
      rowNum += 1; 
      var row = "<tr><td>" + rowNum + "</td><td>" + childData.firstName + "</td><td>" + childData.lastName + "</td><td>" + childData.email + "</td></tr>"
      //var row = "<tr><td>" + rowNum + "</td><td>" + childData.texto + "</td><td>" + childData.lastName + "</td><td>" + childData.email + "</td></tr>"
      $(row).appendTo('#dataTbl');
      
      });
    }, {
       onlyOnce: true
    });


  });

</script>

Answer 1

要处理该问题，请尝试console.log(userId) 。 我认为，您不能将数据设置到数据库，因为userId有问题。

你有没有像document.getElementById('submit')这样在你的 js 中初始化提交按钮，因为我没有看到任何类型的行？

无法将数据插入 firebase 实时数据库

问题描述

1 个解决方案

解决方案1
0 2022-05-30 10:09:08

无法将数据插入 firebase 实时数据库

问题描述

1 个解决方案

解决方案1 0 2022-05-30 10:09:08

解决方案1
0 2022-05-30 10:09:08