Passer un tableau javascript en php via ajax [Résolu/Fermé]

Signaler
Messages postés
127
Date d'inscription
lundi 31 octobre 2016
Statut
Membre
Dernière intervention
20 juin 2017
-
Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
-
Bonjour,
J'ai besoin de passer un tableau javascript en php, pour ce faire j'ai essayé d'utiliser ajax mais ça m'affiche un message d'erreur "Undefined index: tab in ..." , voici le code de mon fichier testajax7.php:

<script type="text/javascript">
var tab=['a','b','c','d'];
</script>
<script type="text/javascript">
$.ajax({
type: "POST",
url: "testajax7.php",
data: { tab : tab},
success: function() {
alert("Success");
}
});
</script>

<?php
$myTable = $_POST['tab'];
print_r($myTable);
?>

j'ai mis testajax7.php dans url: de la fonction ajax parce que j'ai besoin du tableau dans la même page (tout le traitement se fait dans la même page)
SVP, comment je peux modifier ce code pour que je puisse récupérer le tableau en php ?
Merci d'avance

1 réponse

Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
454
Salut,

Ton code fonctionne mais au premier chargement de la page, la variable $_POST['tab'] n'existe pas encore (créée ensuite par la requête ajax) d'où le message d'erreur.
Il faut vérifier l'existence de cette variable avec isset ou empty.

Au passage :
- en html5, plus besoin de préciser l'attribut type pour du code js sur les balises script
- pas besoin de fermer et ouvrir les balises script si il n'y a rien entre les deux
- tu peux cibler la page actuelle en utilisant le symbole #

Exemple de correction :
<?php
if (isset($_POST['tab'])) {
	$myTable = $_POST['tab'];
	print_r($myTable);
} else {
?>
	<script>
	var tab=['a','b','c','d'];
	
	$.ajax({ 
		   type: "POST", 
		   url: "#", 
		   data: { tab : tab}, 
		   success: function(data) { 
				alert(data);
			} 
	}); 
	</script>
<?php 
}
?>


Bonne journée,
Messages postés
127
Date d'inscription
lundi 31 octobre 2016
Statut
Membre
Dernière intervention
20 juin 2017

Pour calculer la distance, j'ai parcouru la table de bdd, ensuite pour chaque ligne j'ai récupéré la longitude et la latitude de chaque client et j'ai transformé le tableau php en javascript puis j'ai fais le calcul de distance en javascript: voici le code :

<?php
//j'ai chargé le tableau php par les clients à partir de
$tab_Clients=array();
$sql_cli = "select * from CustomerForTest";
$stmt_cli = sqlsrv_query( $conn, $sql_cli );
while( $row = sqlsrv_fetch_array( $stmt_cli, SQLSRV_FETCH_NUMERIC) )
{
$ligne=$row[0]." | ".$row[1]." | ".$row[2]." | ".$row[3];
array_push($tab_Clients, $ligne);
}
?>
<script type="text/javascript">
//J'ai passé le tableau php en javascript
var tab_Clients=<?php echo json_encode($tab_Clients); ?> ;
function AfficherClientsAProximite()
{ var tab_distance=[];
var ltt=document.getElementById("malatitude").value;
var lgt=document.getElementById("malongitude").value;

for (var i = 0; i < tab_Clients.length; i++)
{ var splits= (tab_Clients[i]).split(" | ",4);
var dist=getDistanceFromLatLonInKm(ltt,lgt,splits[2],splits[3]).toFixed(3);
alert(dist);
tab_distance[i]=dist;
}
return tab_distance;
}
</script>
//la fonction qui fait le calcul de distance
<script type="text/javascript">
function getDistanceFromLatLonInKm(lat1,lon1,lat2,lon2) {
var R = 6371; // Radius of the earth in km
var dLat = deg2rad(lat2-lat1); // deg2rad below
var dLon = deg2rad(lon2-lon1);
var a =
Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon/2) * Math.sin(dLon/2)
;
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c; // Distance in km
return d;
}
function deg2rad(deg) {
return deg * (Math.PI/180)
}
</script>

voici l'affichage de mon tableau :

<table class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Code Client</th>
<th>Raison Sociale</th>
<th>Longitude</th>
<th> Latitude </th>
<th> Distance </th>
</tr>
</thead>
<?php
$sql = "select * from CustomerForTest";
$stmt = sqlsrv_query( $conn, $sql );
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) )
{
?>
<tbody>
<tr>
<td><?php echo $row[0] ?></td>
<td><?php echo $row[1] ?></td>
<td><?php echo $row[2]; ?></td>
<td><?php echo $row[3];?> </td>
<td> </td>
</tr>
<?php
}
sqlsrv_free_stmt( $stmt);
?>
</tbody>
</table>

il me reste qu'afficher la distance , c-a-d , parcourir le tableau qui contient les distances et l'afficher
Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
454
Ok donc une fois la page chargée tu as :
- le tableau html avec les cellules de la colonne distance vides
- le tableau javascript contenant les distances pour chaque ligne du tableau

Si je comprend bien, les distances dans ton tableau javascript tab sont enregistrés dans le même ordre que l'affichage des lignes de la table html. On peut donc facilement faire la correspondance : l'élément numéro N du tableau javascript correspond à la la distance à afficher sur la ligne N de la table html.

En reprenant la précédent solution proposée, on peut donc ajouter une classe "distance" sur les cellules de la table html où afficher les distances calculées.
On peut ensuite utiliser javascript pour récupérer l'ensemble de ces td avec la classe "distance" (via la fonction querySelectorAll) puis parcourir cet ensemble pour y afficher la distance calculée correspondante.
Par exemple :
<table class="table table-bordered table-hover table-striped">
 <thead>
  <tr>
   <th>Code Client</th>
   <th>Raison Sociale</th>
   <th>Longitude</th>   
   <th> Latitude </th>  
   <th> Distance </th>                                              
  </tr>
 </thead>
 <tbody>                                      
 <?php
 $sql = "select * from CustomerForTest";
 $stmt = sqlsrv_query( $conn, $sql );
 while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_NUMERIC) ) 
 {
 ?>
  <tr>
   <td><?php echo $row[0] ?></td>
   <td><?php echo $row[1] ?></td>
   <td><?php echo $row[2]; ?></td> 
   <td><?php echo $row[3];?> </td>  
   <td class="distance"></td>
  </tr>
 <?php
 }
 sqlsrv_free_stmt( $stmt); 
 ?>                                                 
 </tbody>
</table>
<script>
// le tableau contenant les distances
var tab = ['distance1', 'distance2', 'distance3'];

// affichage des distances calculées dans la table html
var distanceCells = document.querySelectorAll('td.distance');
for (var i = 0; i < distanceCells.length; i++) {
 distanceCells[i].innerHTML = tab[i];
}
</script>

Pour l'exemple j'ai créé le tableau js div en dur.

Petite correction au passage : la balise <tbody> doit être placé avant la boucle while.

Autre solution complétement alternative : Sauf erreur de ma part, tes fonctions javascript permettant de calculer les distances semblent n'avoir rien de spécifique en javascript.
On pourrait donc réécrire ces fonctions js en php afin d'effectuer les calculs et l'affichage des distances directement en php comme pour les autres données. Il n'y aurait alors plus besoin d'aucun code javascript.
Messages postés
127
Date d'inscription
lundi 31 octobre 2016
Statut
Membre
Dernière intervention
20 juin 2017

Merci beaucoup beaucoup beaucoup ...
Messages postés
127
Date d'inscription
lundi 31 octobre 2016
Statut
Membre
Dernière intervention
20 juin 2017

Bonjour Pitet,
Lorsque j'ouvre ma page web, la fonction javascript ne se charge pas automatiquement, elle ne fonctionne que lorsque j'actualise ma page une fois, j'ai essayé plusieurs solutions mais ils n'ont rien donné, j'ai essayé

<body onload="maFonction()">


<script>
body.addEventListener("load", AfficherClientsAProximite());
</script>


window.onload = AfficherClientsAProximite;

Y'a t-il une solution pour que ma fonction se charge automatiquement ?
Messages postés
2432
Date d'inscription
lundi 11 février 2013
Statut
Membre
Dernière intervention
28 juillet 2021
454
Etrange que ton javascript ne fonctionne qu'à l'actualisation de la page, il devrait avoir le même comportement dans tous les cas.

As tu des erreurs dans la console de développement de ton navigateur au premier chargement ?
L'erreur vient p-e du fait que tu essayes d'afficher une variable php dans ton code js alors que la variable php n'existe pas au premier chargement de la page ?