Javascript 如何使用JS eventListener更新Firestore数据库以提交表单_Javascript_Html_Firebase_Google Cloud Firestore

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

javascript html firebase google-cloud-firestore

Javascript 如何使用JS eventListener更新Firestore数据库以提交表单,javascript,html,firebase,google-cloud-firestore,Javascript,Html,Firebase,Google Cloud Firestore,熟悉使用html表单更新Firestore数据库。当我在事件监听器外部硬编码.set时，它会更新数据库，但当我尝试在事件监听器内部执行完全相同的操作时，我会收到这些错误，它们无法到达Cloud Firestore后端，并且由于访问控制权，XMLHTTPRequest无法加载站点。我把它设置成任何人都可以访问数据库，所以我不明白为什么它不工作 document.getElementById("pushMe").addEventListener("click", function submitFor

熟悉使用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!");
});

下面是我尝试使用的事件侦听器代码。当我从这个函数中取出decise.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>


标题
HTML表单
名字：






提交

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

在哪里定义“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时，la:

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

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

docref

不应该是

db.collection（“test”）.doc（“test\u user”）

，因为这就是你最终得到的

吗？最后，我假设您希望动态地设置doc ID，比如…doc（firstnamelastnamrandonum）
，因此您需要保存对变量的set
调用，然后通过其.ID
引用它——但现在，您已经将其硬编码为“test\u user”


是否可能在您进行get
呼叫时未设置数据？您可能需要将get
调用链接为另一个调用，然后将其链接到最后。否则，我不认为您的get
必须等待您的set
完成。（我可能错了！）

最后，你的例子是基于这个Firebase文档的吗？如果是这样的话，我经常发现Firebase文档将使用来自早期文档的速记，比如db
将在早期的某个地方定义为Firebase.firestore（）
，因此您可能希望回溯这些文档，以查看示例是否有隐含的上下文
祝你好运