Bonjour à tous,
Grace à two3d, je suis arrivé à ce que je voulais faire, à savoir : afficher des données d'une balise météo, à partir d'une base MYSQL, sur une page HTML.
J'utilise Bootstrap pour la mise en forme. et j'arrive à afficher les données de manière dynamique avec Ajax.
Je me demandais s'il n'y avait pas la possibilité de remplacer ces lignes :
par une fonction qui ferait la même chose ( car je vais avoir plus de données à afficher à terme).
Voici le code complet utilisé et qui fonctionne :
Code : Tout sélectionner
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Affichage Dynamique avec Ajax</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="bootstrap.min.css" media="screen">
</head>
<body>
<div class="jumbotron">
<h2 class="display-4">Home Balise </h2>
<p class="lead">Affichage Dynamique</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card text-white bg-primary mb-3 text-center" style="max-width: 20rem;">
<div class="card-header" id="thermo">Thermometre </div>
<h2 class="display-4"><span id="Temp"></span> °C</h2>
<div class="card-header" id="thermo">Humidity </div>
<h2 class="display-4"><span id="Hum"></span> %</h2>
</div>
</div>
</div>
</div>
<p id="texte"></p>
<!-- Footer -->
<footer class="footer">
<div class="container-fluid bg-primary text-center fixed-bottom">
<span class="text-muted"> © 2018
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> byfeel.info</a></span>
</div>
</footer>
<!-- Footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
function AppelAjax() {
$.ajax({
url: 'lireData.php', //URL du fichier PHP qui fait la requête SQL
type: 'GET',
dataType: 'json', // On attend une réponse JSON
success: function(data) {
//traitement des données reçues (data)
console.log('Données reçues : ', data);
//mettre ici le code pour traiter les données selon tes besoins
$('#Temp').text(data.Temp);
$('#Hum').text(data.Hum);
//$("#texte").text("Temp : " + data.Temp + " Hum : " + data.Hum);
},
error: function(xhr, status, error) {
console.error('Erreur lors de la requête AJAX :', status, error);
}
});
}
AppelAjax(); // premiere execution
setInterval(function(){
AppelAjax() // rappel toutes les 10 secondes
}, 10000);
</script>
</body>
</html>
Merci.
Bonjour à tous,
Grace à two3d, je suis arrivé à ce que je voulais faire, à savoir : afficher des données d'une balise météo, à partir d'une base MYSQL, sur une page HTML.
J'utilise Bootstrap pour la mise en forme. et j'arrive à afficher les données de manière dynamique avec Ajax.
Je me demandais s'il n'y avait pas la possibilité de remplacer ces lignes :
[code]
$('#Temp').text(data.Temp);
$('#Hum').text(data.Hum);
[/code]
par une fonction qui ferait la même chose ( car je vais avoir plus de données à afficher à terme).
Voici le code complet utilisé et qui fonctionne :
[code]
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>Affichage Dynamique avec Ajax</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<link rel="stylesheet" href="bootstrap.min.css" media="screen">
</head>
<body>
<div class="jumbotron">
<h2 class="display-4">Home Balise </h2>
<p class="lead">Affichage Dynamique</p>
</div>
<div class="container">
<div class="row">
<div class="col-lg-3">
<div class="card text-white bg-primary mb-3 text-center" style="max-width: 20rem;">
<div class="card-header" id="thermo">Thermometre </div>
<h2 class="display-4"><span id="Temp"></span> °C</h2>
<div class="card-header" id="thermo">Humidity </div>
<h2 class="display-4"><span id="Hum"></span> %</h2>
</div>
</div>
</div>
</div>
<p id="texte"></p>
<!-- Footer -->
<footer class="footer">
<div class="container-fluid bg-primary text-center fixed-bottom">
<span class="text-muted"> © 2018
<a href="https://mdbootstrap.com/bootstrap-tutorial/"> byfeel.info</a></span>
</div>
</footer>
<!-- Footer -->
<!-- Bootstrap core JavaScript
================================================== -->
<script src="jquery.min.js"></script>
<script src="bootstrap.min.js"></script>
<script>
function AppelAjax() {
$.ajax({
url: 'lireData.php', //URL du fichier PHP qui fait la requête SQL
type: 'GET',
dataType: 'json', // On attend une réponse JSON
success: function(data) {
//traitement des données reçues (data)
console.log('Données reçues : ', data);
//mettre ici le code pour traiter les données selon tes besoins
$('#Temp').text(data.Temp);
$('#Hum').text(data.Hum);
//$("#texte").text("Temp : " + data.Temp + " Hum : " + data.Hum);
},
error: function(xhr, status, error) {
console.error('Erreur lors de la requête AJAX :', status, error);
}
});
}
AppelAjax(); // premiere execution
setInterval(function(){
AppelAjax() // rappel toutes les 10 secondes
}, 10000);
</script>
</body>
</html>
[/code]
Merci.
