如何在不刷新Firebase的情况下实时更新网页？_Firebase_Web Applications_Firebase Realtime Database

如何在不刷新Firebase的情况下实时更新网页？

firebase web-applications

如何在不刷新Firebase的情况下实时更新网页？,firebase,web-applications,firebase-realtime-database,Firebase,Web Applications,Firebase Realtime Database,这是使用firebase的web应用程序html代码。目标是在不刷新/重新加载页面的情况下实时检索数量怎样才能做到呢？Thxs <!DOCTYPE html> <html lang="en"> <head><meta charset="utf-8"></head> <body> <span class="qty" id="qty">0</span> <script src="h

这是使用firebase的web应用程序html代码。目标是在不刷新/重新加载页面的情况下实时检索数量

怎样才能做到呢？Thxs

<!DOCTYPE html>
<html lang="en">
<head><meta charset="utf-8"></head>
<body>
    <span class="qty" id="qty">0</span>
    <script src="https://www.gstatic.com/firebasejs/4.3.1/firebase.js"></script>
    <script>
        var config = { ... };
        firebase.initializeApp(config);
    </script>
    <script>
        var dbRef = firebase.database().ref();
        var startListening = function() {
            dbRef.on('child_added', function(snapshot) {
                var warehouse = snapshot.child("prod_id/stats").val();
                document.getElementById("qty").innerHTML = warehouse.qty
            });
        }
        startListening();
    </script>
</body>
</html>


0
var config={…}；
firebase.initializeApp（配置）；
var dbRef=firebase.database（）.ref（）；
var startListening=函数（）{
dbRef.on（'child_added'，函数（快照）{
var warehouse=snapshot.child（“prod_id/stats”）.val（）；
document.getElementById（“数量”）.innerHTML=warehouse.qty
});
}
惊人的倾听（）；

由于firebase使用唯一的id数据，当您引用类似于

warehouse.qty

的内容，并使用

添加的child\u

而不是

值

时，您可能会因为路径不正确而得到

null

数据

首先检查数据存储在哪里。检查路径。是否在

产品id/stats/qty

中？或

prod\u id/stats//qty

如果它位于

prod\u id/stats/qty

中，您可能需要将添加的

子项更改为值。代码如下：
var dbRef = firebase.database().ref();
var startListening = function() {
     dbRef.on('value', function(snapshot) {
        var warehouse = snapshot.child("prod_id/stats").val();
        document.getElementById("qty").innerHTML = warehouse.qty
      });
 }
startListening();

路径为“产品id/stats/qty”。很好，很高兴对你有帮助。