1 pièce(s) jointe(s)
Transformer son code XMLHttpRequest en jQuery
Bonjour,
Voilà je débute le JS, l'AJAX et le JQUERY. Voilà je doit faire un projet sur la qualité de l'air exterieur et sur mon projet je faire un site web avec une carte et des points. C'est point doivent correspondes a des emplacement de capteurs. J'ai créer la carte en JS, j'arrive a mettre des points mais avec une latitude et longitude fixe, ce que je voudrait c'est que selon le numéro de capteurs le point soit placé avec la latitude et la longitude qui lui corresponds. Pour cela j'ai donc fait une page HTML, PHP et un script JS avec la fontion XMLHttpRequest (qui marche) et je voudrais simplifié mon fichier et le passé en JQUERY si cela et possible.
Voici le code HTML que j'ai fait avec la fonction XMLHttpRequest :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| <html>
<head>
<meta charset="UTF-8">
<script src="recupSQL.js"></script>
</head>
<body>
<form>
Numéro Boitiers : <input id="valeur" type="text" value=""><BR>
<input id="bouton" type="button" name="OK" value="OK">
</form>
<p>Longitude : <code id="lat"></code></p>
<p>Latitude : <code id="lon"></code></p>
</body>
</html> |
Voici le code PHP que j'ai fait :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
| <?php
require('config.php');
if(isset($_POST['Num_boitiers']))
{
$Num_boitiers=$_POST['Num_boitiers'];
//echo $Num_boitiers;
$sql = "SELECT Latitude, Longitude FROM boitier_qae WHERE Num_boitiers ='".$Num_boitiers."'";
$res = mysqli_query($conn, $sql) or die('Erreur SQL2 !<br/>'.$sql.'<br/>'.mysqli_error($conn));
$data = mysqli_fetch_array($res, MYSQLI_ASSOC);
//var_dump ($data);
$json = json_encode($data); // transforme en notation JSON les données $reponse => le tableau php (array)
echo $json; //retourne au client les données sous forme d'objet JSON
}
?> |
Voici le code JS que j'ai fait avec la fonction XMLHttpRequest :
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
| document.addEventListener("DOMContentLoaded", init);
function init(event)
{
console.log ("Lancement de la fonction init");
document.getElementById("bouton").addEventListener("click", requeteAjax);
}
function requeteAjax()
{
console.log("requeteAjax");
let id =document.getElementById("valeur").value;
if (id == "")
{
console.log("Champs pas rempli !");
}
else
{
var data = "Num_boitiers="+id;
var url = "recupSQL.php";
var ajax = new XMLHttpRequest();
ajax.open("POST", url, true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
//ajax.setRequestHeader("Content-length", data.length);
//ajax.setRequestHeader("Connection", "close");
//Envoie les informations du header avec la requête
ajax.send(data);
ajax.onreadystatechange = function()
{
if (this.readyState == 4 && this.status == 200)
{
console.log(this.responseText);
var data=JSON.parse(this.responseText)
document.getElementById("lat").innerHTML=data["Latitude"];
document.getElementById("lon").innerHTML=data["Longitude"];
}
};
}
} |
Ce code la marche bien comme vous pouvez le voir avec la photo:
Pièce jointe 599138
Voici le nouveau code HTML pour la nouvelle version avec le JQUERY:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
| <html>
<head>
<meta charset="UTF-8">
<script src="recupSQLv1.js"></script>
<script src="JS/jquery-3.5.1.min.js"></script>
</head>
<body>
<form>
Numéro Boitiers : <input id="valeur" type="text" value=""><BR>
<input id="bouton" type="button" name="OK" value="OK">
</form>
<p>Longitude : <code id="lat"></code></p>
<p>Latitude : <code id="lon"></code></p>
</body>
</html> |
Le code PHP ne change pas
Voici le nouveau code JS pour le JQUERY:
Code:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| document.addEventListener("DOMContentLoaded", init);
function init(event) {
console.log("Lancement de la fonction init");
document.getElementById("bouton").addEventListener("click", requeteAjax);
}
function requeteAjax(){
console.log("requeteAjax")
let id =document.getElementById("valeur").value;
if (id == "")
{
console.log("Le champ n'est pas remplie");
}
else
{
$.ajax({
type: "POST",
url: "recupSQL.php",
data: {"Num_boitiers": id},
dataType: "json", // type de retour
success : function(data, resultat, statut){ // success de la requete AJAX...
console.log("statut", statut)
console.log("resultat", resultat)
recup(data)
},
error : function(resultat, statut, erreur){ // erreur dans la requete AJAX
console.log("Erreur", resultat)
var data=JSON.parse(this.responseText)
document.getElementById("lat").innerHTML=data["Latitude"];
document.getElementById("lon").innerHTML=data["Longitude"];
}
})
/* .done(function() {
console.log("success");
})
.fail(function() {
console.log("error");
})
.always(function() {
console.log("complete");
})*/;
}
} |
J'ai une erreur sur la ligne data: {"Num_boitiers": id}, et je voit pas du tout mon erreur.
Merci d'avance pour votre aide
Baptiste
