jQuery-无法将数据设置为Firebase [英] JQuery - can not set data to firebase
问题描述
由于某种原因，我无法将数据设置为firebase实时数据库.该功能可以按预期工作，值存储在vars中，并且不会显示任何错误...数据不会上传到Firebase实时数据库中.
for some reason, i cannot set data to firebase realtime database. the function works as intended, values are stored in the vars, and no error is presented...the data just won't upload to the firebase realtime database.
js代码:
$(document).ready(function(){
document.getElementById('submitEmplyee').onclick = function()
{
idNumberVal = document.getElementById('IDNum').value;
nameVal = document.getElementById('Name').value;
addressVal = document.getElementById('Address').value;
telephoneVal = document.getElementById('telephone').value;
//Ready();
firebase.database().ref('employe/' + nameVal).set({
EmplyeeID: idNumberVal,
NameOfEmp: nameVal,
AddressOfEmp: addressVal,
TelephoneOfEmp: telephoneVal
});
//alert("New HighScore !!!");
}
来源:
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="logic.js"></script>
完整的HTML代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>David Frucht CRUD app</title>
</head>
<body>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<h1>Emplyee Information</h1>
<button id="newEmployeBtn" class="btn btn-primary btn-block">New Emplyee</button><br /><br />
<form id="newForm">
<div class="form-group row">
<label for="IDNum" class="col-sm-2 col-form-label">ID Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="IDNum" placeholder="ID Number">
</div>
</div>
<div class="form-group row">
<label for="Name" class="col-sm-2 col-form-label">Name</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Name" placeholder="Name">
</div>
</div>
<div class="form-group row">
<label for="Address" class="col-sm-2 col-form-label">Address</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="Address" placeholder="Address">
</div>
</div>
<div class="form-group row">
<label for="telephone" class="col-sm-2 col-form-label">Telephone Number</label>
<div class="col-sm-10">
<input type="text" class="form-control" id="telephone" placeholder="Telephone Number">
</div>
</div>
<button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>
</form>
<table id="emplyesTable" class="table table-bordered table-hover">
<thead>
<th>Emplyee ID</th>
<th>Name</th>
<th>Address</th>
<th>Telephone</th>
<!-- <th>DB ID</th>
<th>Controls</th>-->
</thead>
<tbody id="employeBody"></tbody>
</table>
</div>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-app.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-auth.js"></script>
<script src = "https://www.gstatic.com/firebasejs/8.2.4/firebase-database.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="logic.js"></script>
</body>
推荐答案
我没有测试您的代码，但是导致问题的原因很可能是您的表单是在Firebase set()之前提交的事实方法被触发.
I didn't test your code, but the cause of your problem is most probably the fact that your form is submitted before the Firebase set() method is triggered.
事实上，您按以下方式声明您的按钮:
As a matter of fact, you declare your button as follows:
<button id="submitEmplyee" type="submit" class="btn btn-primary">Add to DB</button>
As detailed in the W3 specification on button types, "the missing value default is the Submit Button state" and "if the type attribute is in the Submit Button state, the element is specifically a submit button".
因此，如果您向按钮中添加 button 类型，如下所示，它将解决您的问题.
So, if you add a button type to your button, as follows, it should solve your problem.
<button id="submitEmplyee" type="button" class="btn btn-primary">Add to DB</button>
这篇关于jQuery-无法将数据设置为Firebase的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
