如何使用 JS eventListener 更新 Firestore 数据库以提交表单答案

【问题标题】：How to update Firestore Database using JS eventListener to submit form如何使用 JS eventListener 更新 Firestore 数据库以提交表单
【发布时间】：2020-01-25 01:49:46
【问题描述】：

熟悉使用 html 表单更新 Firestore 数据库。当我在事件侦听器之外对.set进行硬编码时，它会更新数据库，但是当我尝试在事件侦听器内执行完全相同的操作时，我会收到这些错误，它们无法到达 Cloud Firestore 后端并且 XMLHTTPRequest 无法加载站点由于访问控制权限。我设置了它，以便任何人都可以访问数据库，所以我不明白为什么它不起作用。

document.getElementById("pushMe").addEventListener("click", function submitForm(){
    let first_name = document.getElementById("firstname").value;
    let last_name = document.getElementById("lastname").value;
    console.log(first_name, last_name);

    docref.set({
        first_name: first_name,
        last_name: last_name
    }, { merge: true }).then(function(){
        console.log("User saved!");
    }).catch(function(error){
        console.log("Error: ", error);
    });

   db.collection("test").doc("test_user").get().then(function(doc) {
        if (doc.exists) {
            console.log("Document data:", doc.data());
        } else {
            // doc.data() will be undefined in this case
            console.log("No such document!");
        }
    }).catch(function(error) {
        console.log("Error getting document:", error);
    });

   console.log("GOODBYE!");
});

这是我尝试使用的事件侦听器代码。当我从这个函数中取出 decree.set 块时，它会按照预期的方式更新数据库。我们有一个 html 表单，我们希望它在单击提交按钮时提交。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript" src="https://www.gstatic.com/firebasejs/7.7.0/firebase-app.js"></script>
    <script type="text/javascript" src="https://www.gstatic.com/firebasejs/7.7.0/firebase-firestore.js"></script>
</head>
<body>

<h2>HTML Forms</h2>

<form id="submit1">
    First name:<br>
    <input id= "firstname" type="text" name="firstname">
    <br>
    <input id= "lastname" type="text" name="lastname">
    <br><br>
    <button type="submit" id="pushMe"> Submit! </button>
</form>

<script type="text/javascript" src="web_app_test.js"></script>
</body>
</html>

还有其他人遇到过这些问题吗？

access control error??

【问题讨论】：

标签： javascript html firebase google-cloud-firestore

【解决方案1】：

“docref”在哪里定义？可能有什么问题

如果您尝试添加用户并且不关心 id 是什么，请尝试：

db.collection("test").add({
    first_name: first_name,
    last_name: last_name
}).then(function(){
    console.log("User saved!");
}).catch(function(error){
    console.log("Error: ", error);
});

使用.set() 是为了当你想手动设置一个id时，a la：

db.collection("test").doc("manually set id").set({...stuff})

【讨论】：

【解决方案2】：

欢迎！可能有帮助的三个问题：

不应该docref 是db.collection("test").doc("test_user")，因为这就是你最终的geting？最终，我假设您希望动态设置文档 ID，例如 ...doc(firstNameLastNameRandomNum)，因此您需要将您的 set 调用保存到一个变量，然后通过它的 .id 引用它——但现在，您已将其硬编码为 'test_user'
是否有可能在您拨打get 电话时尚未设置数据？最后，您可能需要将 get 调用链接为另一个 then。否则，我认为您的get 不一定会等待您的set 完成。（我可能错了！）
最后，您的示例是否基于此 Firebase 文档？ https://firebase.google.com/docs/firestore/manage-data/add-data#set_a_document 如果是这样，我经常发现 Firebase 文档将使用来自早期文档的速记，例如 db 会在更早的某个地方定义为 firebase.firestore()，因此您可能想回溯那些以查看如果样本有一些隐含的上下文。

祝你好运！

【讨论】：