Firebase Realtime Database - Add and Retrieving Data using jquery.
Firebase's real-time database is a popular feature that allows developers to store and sync data in real-time across multiple clients. This means that any changes made to the database are immediately reflected on all connected devices, providing a seamless user experience.
index.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js"></script>
<script>
var firebaseConfig =
{
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
</script>
<script>
var database = firebase.database();
function writeUserData() {
var msg =$("#nnn").val();
alert(msg);
firebase.database().ref().set({
Msg: msg
});
}
</script>
<input type="text" id="nnn">
<input type="submit" onclick="writeUserData()">
</body>
</html>
index2.html
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<title>Page Title</title>
</head>
<body>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/3.1.0/firebase-database.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.2.3/firebase-analytics.js"></script>
<script>
</script>
<h1 id="bigText"></h1>
<script>
(function() {
const config = {
apiKey: "",
authDomain: "",
databaseURL: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
measurementId: ""
};
firebase.initializeApp(config);
const bigText = document.getElementById('bigText');
const dbRef = firebase.database().ref().child('Msg');
dbRef.on('value', snap => bigText.innerText = snap.val());
}());
</script>
</body>
</html>
Get the latest news and updates by signing up to our daily newsletter.We won't sell your email or spam you !