Question

我正在做的页面可以保存用户的问题。这意味着，当身体加载时，所有问题都会显示出来。当用户发布新问题时，数据应保存到firebase，并且主体应该重新加载，显示新问题以及之前发布的其他问题（位于数据库中）。

    <script>
        function saveToDB() {

            // Initialize Firebase
          var config = {
            apiKey: "AIzaSyDH1bPI9AZj4gFGyCYVNNWA7xvr9sU9Qvw",
            authDomain: "show-off-your-talent-b9923.firebaseapp.com",
            databaseURL: "https://show-off-your-talent-b9923.firebaseio.com",
            storageBucket: "show-off-your-talent-b9923.appspot.com",
            messagingSenderId: "1005390925584"
          };
          if(firebase.apps.length===0){
            firebase.initializeApp(config);
            var dbRef = firebase.database().ref().child('qns');
            var question = document.getElementById("myTextarea").value;

            var postData = {
                qnsask : question
            };
            dbRef.push(postData);
            document.getElementById("response").innerHTML = "POSTED!";

            dbRef.once('value', function(snapshot){
            snapshot.forEach(function(childSnapshot){
                var childData = childSnapshot.val();
                document.getElementById("questions").innerHTML = document.getElementById("questions").innerHTML + "</br>" + childData.qnsask;
            });
          });
          }
        }

        function Retrieve() {

            // Initialize Firebase
          var config = {
            apiKey: "somekey",
            authDomain: "somekey.firebaseapp.com",
            databaseURL: "https://somekey.firebaseio.com",
            storageBucket: "somekey.appspot.com",
            messagingSenderId: "somekey"
          };
          if(firebase.apps.length===0){
            firebase.initializeApp(config);
          }
            var dbRef = firebase.database().ref().child('qns');
            dbRef.once('value', function(snapshot){
            snapshot.forEach(function(childSnapshot){
                var childData = childSnapshot.val();
                document.getElementById("questions").innerHTML = document.getElementById("questions").innerHTML + "</br>" + childData.qnsask;
            });
          });
        }


    </script>
</head>
<body onload="Retrieve()">
    <div id="forum">
        <form action="#" onsubmit="saveToDB(); return false">
        <p class="qns">
            <label for="qn">Your question:</label>
            <textarea rows="5" cols="100" id="myTextarea"></textarea>
        </p>                                                    
        <input type="reset" class = "button"  value="Cancel">
        <input type="submit" value="Post" class = "button button1">
        <p id ="response"></p>                                                          
    </div>
    <div id="questions">
    </div>
</body>

所以现在发生的事情是，在我将onload函数添加到正文之前，saveToDB（）函数工作正常。

Answer 1

更简单的解决方案可能是使用AJAX提交数据并在回调中附加问题。这样可以完全避免整个页面刷新，并产生更快的界面。 React在这种DOM管理方面特别擅长，但是你已经使用了vanilla JS。

Body onload与将数据保存到数据库的函数冲突

1 个答案: