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 : 301
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 : 204
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.)

Transformer son code XMLHttpRequest en jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager