gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-30 20:07:04 26 4
gpt4 key购买 nike

我已经编写了一个相当简单的表单来发送到我的 Firebase 数据库,但我的数据库似乎没有使用来自 submit.html 页面的新数据进行更新。我是 Firebase 的新手,我已经引用了文档,但我确信我忽略了一些东西。出于测试目的,此阶段的 Web 应用程序只是将名字和姓氏发送到我的数据库,列在名为 graduate 的集合下。

我还想为其分配一个唯一的文档 ID/自动 ID。根据 Firebase documentation :

[...] the Firebase JavaScript clients provide a push() function that generates a unique ID, or key, for each new child. By using unique child keys, several clients can add children to the same location at the same time without worrying about write conflicts.

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

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

{
/* 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;
}

最佳答案

我怀疑您的根引用可能已关闭。也许试试这个:

var ref = firbase.database().ref(<ROOT_REF>)
var rootRef = ref.child('graduate')

关于javascript - Firebase - 从 Web 应用程序表单向数据库写入新数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52807593/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com