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

这是使用Firebase的网络应用程序html代码。目标是实时检索数量，而无需刷新/重新加载页面。如何在不刷新Firebase的情况下实时更新网页？

怎么办？ 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>

来源

2017-09-15 hbbz040

由于火力点采用独特的ID数据，当您参考类似warehouse.qty，并采用child_added代替value，你可能会结束与null数据，因为路径是不正确的。

首先检查您的数据存储在哪里。检查路径。它在prod_id/stats/qty？或prod_id/stats/<some-unique-key>/qty？

如果它在prod_id/stats/qty中，您可能需要将child_added更改为value。如在下面的代码：

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();

来源

2017-09-15 18:41:41 Ridwan

的路径为 “PROD_ID /统计/数量”。工作正常。 – hbbz040

很高兴帮助你。 – Ridwan

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

回答

相关问题