使用Javascript向Firebase添加数据的最简单方法

我看过以前的文章、文档和其他资源，但我就是不知道如何在单击按钮时向firebase数据库添加条目。该按钮调用writeNewPost（）。这是我试过的

<button type="submit" class="btn btn-light" onclick="writeNewPost()">Submit</button>
<script src="https://www.gstatic.com/firebasejs/4.2.0/firebase.js"></script>

<script>
  var config = {
    apiKey: MYAPIKEY,
    authDomain: MYDOMAIN,
    databaseURL: MYURL,
    projectId: MYPROJECT,
    storageBucket: STORAGEBUCKET,
    messagingSenderId: SENDERID
  };
  firebase.initializeApp(config);
</script>

<script>
    function writeNewPost() {
      var postData = {
        "Name": "Brett"
      };

     var newPostKey = firebase.database().ref().push().key;

     var updates = {};
     updates['/' + newPostKey] = postData;

     return firebase.database().ref().update(updates);
   }
</script>

提交
变量配置={
阿皮奇：我的阿皮奇，
authDomain:MYDOMAIN，
数据库URL:MYURL，
项目D：我的项目，
storageBucket:storageBucket，
messagingSenderId:SENDERID
};
firebase.initializeApp（配置）；
函数writeNewPost（）{
var postData={
“姓名”：“布雷特”
};
var newPostKey=firebase.database（）.ref（）.push（）.key；
var更新={}；
更新['/'+newPostKey]=postData；
返回firebase.database（）.ref（）.update（更新）；
}

---

我只想在根目录下加上“Name”：“Brett”。

您的代码看起来相当不错。要与Firebase进行简单的沟通，您首先需要设置一些规则

注意：使用您的代码，将规则添加到

数据库中→ 规则（选项卡）

，它可以工作

免责声明！！仅在有限的测试时间内使用以下选项-因为它会向公众打开数据库-并始终阅读可能出现在面板中的警告

从：

在启动应用程序之前，必须正确配置这些规则，以确保用户只能访问他们应该访问的数据

---

您呈现代码的方式—内联的

onclick=

指向一个只在代码中定义的函数，因此您有被

未定义的风险

将JS保存在一个位置的更好方法。

删除内联
onclick
并添加一个
ID
选择器，如
ID=“submitPost”

这基本上是因为：是的。几乎是直接的。我看你的代码没有问题。。。除了让我想知道
'/'+newPostKey
是否是正确的路径之外。。。您的按钮是否调用了该功能？因为我想，按照您的方式-未定义的函数在
onclick=“writeNewPost（）”
中，您是否尝试在
writeNewPost
中放置
console.log（“调用！”）
？是的。我刚刚测试了它，它正在被调用。请始终在提供此类建议的同时附上免责声明，以仅在有限的时间内执行此操作，因为它会打开数据库，以供任何用户滥用。这仍然不起作用。顺便说一句，我的数据库是空的。我想补充一下。所以我试图在根下放置一个键值对。@brett我的手被绑住了。我使用了你的代码，并根据我的建议进行了修改，以使其正常工作，创建了一个firebase项目，设置了测试规则，单击了按钮，我直接在根目录下获得了存储的键/值数据。有什么我遗漏的吗？
{
  "rules": {
    ".read": true,
    ".write": true
  }
}

<button id="submitPost" type="submit" class="btn btn-light">Submit</button>

document.getElementById("submitPost").addEventListener("click", writeNewPost);