从 HTML 写入 Firebase 数据库

Question

我正在尝试从 html 向 Firebase 写入一些数据。这个过程有效；但是，有时我会收到 503 错误，有时还会收到“弃用”通知，而且，当我单击“提交”时，有时会出现很长的延迟，直到提交完成。是写的对还是过程不对？

  <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>

 <script>
     var firebaseConfig = {
         apiKey: "AIzaSy333333CoLQMOkxO3rYLiywsrib6nCOWFBZv_xI0",
         authDomain: "dem33333otestingdata.firebaseapp.com",
         databaseURL: "https://dem33333otestingdata.firebaseio.com",
         storageBucket:"dem33333otestingdata.appspot.com",
     };
     firebase.initializeApp(firebaseConfig);

     function writeData() {
         firebase.database().ref("User").set({
             name:document.getElementById("nameField").value,
             age:document.getElementById("ageField").value
         });
     }

      </script>
      <h1>User Databse</h1>
      <input type="text" placeholder="name" id="nameField">
      <input type="text" placeholder="age" id="ageField">

      <button onclick = "writeData()">Submit</button>

Answer 1

只需尝试从 HTML 文件中删除此

script

标签，因为该标签已被弃用

  <script src="https://www.gstatic.com/firebasejs/4.1.2/firebase.js"></script>

并替换以下内容

  <script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>

使用最新的CDN

<script src="https://www.gstatic.com/firebasejs/6.2.4/firebase-database.js"></script>

Answer 2

<title>Firebase Database Form</title>

<h1>Firebase Database Form</h1>

<form id="firebase-form">

    <label for="name">Name:</label>

    <input type="text" id="name" name="name"><br><br>

    <label for="email">Email:</label>

    <input type="email" id="email" name="email"><br><br>

    <label for="message">Message:</label>

    <textarea id="message" name="message"></textarea><br><br>

    <button type="submit">Submit</button>

</form>

<script>

    // Initialize Firebase

    const firebaseConfig = {

        apiKey: "AlzaSyAHQKF67PJq3eVWmpOq4dZY7HYaApI-aPw",

        authDomain: "bennsform.firebaseapp.com",

        databaseURL: "https://www.gstatic.com/firebasejs/10.12.5/firebase-app.js",

        projectId: "bennsform",

        storageBucket: "bennsform.appspot.com",

        messagingSenderId: "504478097606",

        appId: "1:504478097606:web:9fda4943b25ac638d837c7"

};

    firebase.initializeApp(firebaseConfig);



    // Get the form and form elements

    const form = document.getElementById("firebase-form");

    const nameInput = document.getElementById("name");

    const emailInput = document.getElementById("email");

    const messageInput = document.getElementById("message");

    

    // Add event listener for form submission

    form.addEventListener("submit", (e) => {

        e.preventDefault();

        const name = nameInput.value;

        const email = emailInput.value;

        const message = messageInput.value;

// 添加表单提交事件监听

    form.addEventListener("submit", (e) => {

        e.preventDefault();

        const name = nameInput.value;

        const email = emailInput.value;

        const message = messageInput.value;

        

        // Add data to Firebase Realtime Database

        firebase.database().ref("messages").push({

            name,

            email,

            message

        });

        

        // Clear form fields

        nameInput.value = "";

        emailInput.value = "";

        messageInput.value = "";

    });