Transformer son code XMLHttpRequest en jQuery

**Darkoos0410** · 03/06/2021, 22h59

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 HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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:
Nom : 1.png
Affichages : 249
Taille : 212,3 Ko

Voici le nouveau code HTML pour la nouvelle version avec le JQUERY:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**CosmoKnacki** · 04/06/2021, 15h22

Je ne suis pas expert en jQuery, mais je pense que le paramètre data doit contenir des données sérialisées donc une chaîne:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

data: "Num_boitiers=" + id,

Quoique à lire la doc de jQuery, il semble que passer un objet soit aussi possible.

**Darkoos0410** · 04/06/2021, 18h31

Tu veut dire directement une variable.

**CosmoKnacki** · 04/06/2021, 20h54

Je pensais juste écrire ce passage de cette manière:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$.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);
    },

mais je doute que ça change quelque chose. Es-tu sûr que le problème vient bien de cette ligne? Que t'indique la console?

Aussi autre chose, pourquoi vouloir absolument passer ton code en jQuery? Et question subsidiaire, quitte à l'utiliser, pourquoi tu ne l'exploites pas à fond, en convertissant tout le code Javascript d'origine?

NB: Tu peux aussi directement utiliser $.post() lorsque la méthode de ton appel ajax est la méthode POST.

**Darkoos0410** · 04/06/2021, 21h27

Bonjour,

Effectivement ça change rien mais il y a d'autre erreur qui et arriver
Nom : 2.png
Affichages : 162
Taille : 93,2 Ko

C'est cet ligne là maintenant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

var data=JSON.parse(this.responseText)

**CosmoKnacki** · 04/06/2021, 21h44

regarde ton fichier PHP s'il n'y a pas un caractère qui traîne avant l'ouverture de la balise <?php. (Fait aussi un console.log(responseText) avant le JSON.parse() pour voir précisément ce que tu reçois coté client.)

**Darkoos0410** · 04/06/2021, 23h14

J'ai l'impression que le responseText ne reçoit rien,
Nom : 2.png
Affichages : 171
Taille : 93,2 Ko

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.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)
					console.log(responseText);
					document.getElementById("lat").innerHTML=data["Latitude"];
					document.getElementById("lon").innerHTML=data["Longitude"];
				}
			})

En regardant le message d'un peut plus près j'ai l'impression que c'est la syntaxe du JSON.parse qui lui plait pas, mais je n'est pas trouvé d'autre syntaxe que celle ci.

**ABCIWEB** · 05/06/2021, 04h30

Envoyé par Darkoos0410

J'ai l'impression que le responseText ne reçoit rien,
...
En regardant le message d'un peut plus près j'ai l'impression que c'est la syntaxe du JSON.parse qui lui plait pas, mais je n'est pas trouvé d'autre syntaxe que celle ci.

Elle est définie où cette variable this.responseText ? Réponse : nulle part. Tu mélanges avec la syntaxe sans jquery. Si la fonction error de jQuery te renvoies 3 variables, ce sont ces variables qu'il faut utiliser et non pas d'autres qui ne sont définies nulle part. Donc tu peux utiliser "resultat", "statut" et "erreur", et rien d'autre.

**Darkoos0410** · 05/06/2021, 10h53

Bonjour,

Donc si j'ai bien compris ce que tu as dit il faut que je déclare la variable "this.responseText".
Et ducou le code deviendrait ça

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$.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)
					//console.log(responseText)
					document.getElementById("lat").innerHTML=data["Latitude"];
					document.getElementById("lon").innerHTML=data["Longitude"];
				}
			})

Mais si je les met en commentaires ça veut dire que le document.getElementById va rien recevoir, ni la latitude et na la longitude

**Darkoos0410** · 05/06/2021, 15h22

Bonjour,

Quand je met en commentaire le JSON.parse cela me donne cet erreur "Uncaught ReferenceError: data is not defined" sur cet ligne

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("lat").innerHTML=data["Latitude"];

mais je vois pas ce que le document.getElementById a de faux

**CosmoKnacki** · 05/06/2021, 17h42

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

document.getElementById("lat").innerHTML=data["Latitude"];

mais je vois pas ce que le document.getElementById a de faux

ABCIWEB te la fait remarquer précédemment: tu utilises des variables qui n'existent pas! Il n'y a pas de paramètre data dans ta méthode error ni de variable data définis dans le corps de cette méthode.

Tu devrais te reporter systématiquement à la documentation de jQuery plutôt que d'essayer d'avancer au petit bonheur la chance (car ça ne sert strictement à rien, mis à part te faire perdre du temps).

Déjà si $.ajax() prend en paramètre un objet avec une méthode success et une méthode error, c'est sûrement pas dans celle qui s'appelle error qu'il faut s'attendre à avoir accès aux données espérées. error c'est la méthode qui dit quoi faire quand la requête ajax a échoué. success est par contre la méthode déclenchée lorsque la requête a réussi, donc c'est par ici que ça se passe.

Dans la documentation jQuery tu trouveras une description des paramètres que prennent ces deux méthodes. Ton code pourrait ressembler à ça:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
$.ajax('recupSQL.php',
       {
           type: 'POST',
           data: 'Num_boitiers=' + id,
           dataType: 'json',
 
           success: function(data, textStatus, jqXHR) {
               $('#lat').text(data['Latitude']);
               $('#lon').text(data['Longitude']);
           },
 
           error: function(jqXHR, textStatus, errorThrown) {
               console.log(textStatus);
           }
       }
);

**CosmoKnacki** · 05/06/2021, 18h06

ou en version raccourcie:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
$.post('recupSQL.php',
       'Num_boitiers=' + id,
       function(data, textSatus, jqXHR) {
           $('#lat').text(data['Latitude']);
           $('#lon').text(data['Longitude']);
       },
       'json'
).fail(function(jqXHR, textStatus, errorThrown) {
    console.log(textStatus);
});

**Darkoos0410** · 05/06/2021, 19h09

Merci ça marche bien et merci pour le conseille, je t'avoue je débute dans ce langage et j'ai encore beaucoup de mal. Merci encore pour l'aide précieuse que tu m'as apporté

**CosmoKnacki** · 05/06/2021, 19h16

Tant mieux, mais ne t'arrête pas là, va au bout de ta démarche en exploitant jQuery au maximum et en "traduisant" le reste de ton script et en le complétant. Et surtout, lit la doc.

Transformer son code XMLHttpRequest en jQuery

jQuery

Discussions similaires

Partager

Partager