javascript - Firebase - 从 Web 应用程序表单将新数据写入数据库

问题描述

我编写了一个相当简单的表单来发送到我的 Firebase 数据库，但我的数据库似乎没有使用我submit.html页面中的新数据进行更新。我对 Firebase 很陌生，我参考了文档，但我确信我忽略了一些东西。出于测试目的，此阶段的 Web 应用程序旨在简单地将名字和姓氏发送到我的数据库，列在名为graduate.

我还想为它分配一个唯一的 documentID/Auto-ID。根据Firebase 文档：

[...] Firebase JavaScript 客户端提供了一个 push() 函数，为每个新的孩子生成一个唯一的 ID 或密钥。通过使用唯一的子键，多个客户端可以同时将子节点添加到同一位置，而无需担心写入冲突。

这似乎正是我正在寻找的，所以我在下面的函数中包含了推送调用。

我还应该提到我已经为我的数据库编写了以下规则：

{
  /* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
  "rules": {
    ".read": true,
    ".write": true
  }
}

无论如何，这是我的代码：

我的HTML：

<!DOCTYPE html>
<html>
    <head>
        <title>Student Tracking</title>
        <script src="authentication.js"></script>
        <link rel="stylesheet" href="animate.css">
        <link href="https://fonts.googleapis.com/css?family=Cormorant|Roboto:100" rel="stylesheet">
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script src="app.js"></script>
    </head>
    <body>
    <div id="container">
            <header>
                <img src="logo.png" class="logo">
                <h1 class="englogo">Department of English</h1>
                <div class="nav">
                    <ul>
                        <li><a href="home.html">Home</a></li>
                        <li><a href="submit.html">Submit</a></li>
                        <li><a href="query.asp">Query</a></li>
                    </ul>
                </div>
                <div id="contentform">
                    <form id="newUserForm">
                        <h3>Complete the following form to add your student information
                            to the database.
                        </h3>
                        <label for="Field1">First Name:</label><br>
                        <input id="userfName" name="Field1" type="text" value=""><br><br>
                        <label for="Field2">Last Name:</label><br>
                        <input id="userlName" name="Field2" type="text" value=""><br><br>
                        <label for="Field3"></label><br>
                        <input id="saveForm" name="saveForm" type="button" value="Submit Form">
                    </form>
                </div>
            </header>
        </div>
    </body>
</html>

我的app.js：

var config = {
    apiKey: "apiKey",
    authDomain: "authDomain",
    databaseURL: "url",
    projectId: "proID",
    storageBucket: "SB",
    messagingSenderId: "sendID"
    };
firebase.initializeApp(config);

var rootRef = firebase.database().ref().child('graduate');

$('#saveForm').click(function(){
    rootRef.push().set({

        firstName:$('#userfName').val(),
        lastName:$('#userlName').val()
    });
})

我的 CSS：

.logo {
    display: inline-block;
    margin: auto 0;
}

.google {
    color: #0099CC; 
    background: transparent;
    border: 1px solid #0099CC;
    border-radius: 6px;
}

.nav {
    position: relative;
    float: right;
    padding: 60px 20px 15px 10px;
    text-align: right;
    z-index: 1;
    background: white;
    margin: 0 auto;
}

.nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav ul li {
    display: inline-block;
    list-style: none;
    margin: 0;
    padding: 0;
    font-family: 'Roboto', sans-serif;
    font-size: 1.3em;
}

.nav li a {
    text-decoration: none;
    color: black;
    margin: 4px;
}

h1.englogo {
    display: inline-block;
    padding-left: 1%;
    font-family: 'Cormorant', serif;
    position: relative;
    bottom: 15px;
}

header {
    height: 100px;
    width: 100%;
    z-index: 10;
    position: fixed;
    border-bottom: solid thin;
    background-color: white;
}

#content {
    width: 100%;
    text-align: center;
    position: relative;
    top: 200px;
    height: 1500px;
    font-family: 'Roboto', sans-serif;
}

#contentForm {
    widows: 100%;
    position: relative;
    top: 150px;
    height: 1500px;
}

form {
    width: 100%;
    position: relative;
    top: 90px;
    height: 1500px;
    font-family: 'Roboto', sans-serif;
    border: none;
}

标签： javascriptfirebasefirebase-realtime-database

javascript - Firebase - 从 Web 应用程序表单将新数据写入数据库

问题描述

解决方案

推荐阅读