从 Web 应用程序将数据写入实时数据库不起作用

Question

我想使用 javascript 从 Web 应用程序将数据插入到 firebase 实时数据库中。为此，我使用了从 firebase 文档中获取的代码：

function writeUserData(userId, firstName, lastName, email) {
  alert("hola");
  set(ref(database, 'users/' + userId), {
        firstName: firstName,
        lastName: lastName,
        email : email
  });
}

但是没用。读取 (getData) 没有问题，但写入没有。我已经验证它可以毫无问题地进入 writeUserData 函数，并且可以完美地生成 userId。这是完整的代码。

<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>
    
  </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 { 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";

  const firebaseConfig = {
  
    //here goes my data
  };

  const app = initializeApp(firebaseConfig);
  const database = getDatabase(app);

 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;        
    writeUserData(userId, firstName, lastName, email)
  });     

  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
    });
  });
function writeUserData(userId, firstName, lastName, email) {
  alert("hola");
  set(ref(database, 'users/' + userId), {
        firstName: firstName,
        lastName: lastName,
        email : email
  });
}        
</script>

Answer 1

删除 form 标记，并在您的 JS 代码中初始化 submit 按钮。（从我的评论中复制）

从 Web 应用程序将数据写入实时数据库不起作用

writing data to realtime database from web application does not work

javascript

jquery

firebase

firebase-realtime-database