[AJAX] XHR dans une boucle

Version imprimable

Bonjour,

je veux enregistrer les données d'un tableau dynamique dans la base de données.
donc le nombre des lignes est inconnu.
j'ai mis XHR dans une boucle for pour enregistrer les données.
le problème est que parfois aucune ligne n'est enregistrée et parfois seulement quelques lignes sont enregistrées.
voici le code :
JS :

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
 function PostData(ref) {
 
    var xhr;
    if (window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    }
    else {
        throw new Error("Probleme avec ce naviguateur");
    }
 
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            if (xhr.status == 200 && xhr.status < 300) {
                //document.getElementById('div1').innerHTML = xhr.responseText;
            }
        }
    }
 
    var i=0,
      nom,
      description,prix,
	  total, remise;
	  articles =document.getElementsByName('Varticle[]');	
	for(i; i< articles.length; i++)
  {
 xhr.open('POST', 'Vente.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    nom    = document.getElementsByName('Varticle[]')[i].value;
	description    = document.getElementsByName('Vdescription[]')[i].value;
	prix    = document.getElementsByName('Vprix[]')[i].value;
	quantite    = document.getElementsByName('Vquantite[]')[i].value;
	remise    = document.getElementsByName('Vremise[]')[i].value;
	total    = document.getElementsByName('Vtotal[]')[i].value;
 
	xhr.send("nom="+nom+"&prix="+prix+"&description="+description+"&quantite="+quantite+"&remise="+remise+"&total="+total+"&ref="+ref);
  }
 }

PHP:

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
<?php 
$conn = mysql_connect("localhost","root","") or die(mysql_error());
mysql_select_db("wordpress",$conn) or die(mysql_error());
 
if (isset($_POST["nom"]))
{ $ref = $_POST["ref"];
  $nom = $_POST["nom"];
  $prix = $_POST["prix"];
  $description = $_POST["description"];
  $quantite = $_POST["quantite"];
  $total = $_POST["total"];
   $remise = $_POST["remise"];
 
 
  /* </br>';  echo $prix.'</br>'; echo $description.'</br>'; echo $quantite.' </br>'; echo $remise.'</br> '; echo $total.' </br>';*/
  $result = mysql_query("INSERT INTO wordpress.wp_Devis_Vente(reference,article,prix,description,remise,quantite,total) VALUES('$ref','$nom', '$prix','$description','$remise','$quantite','$total')") or die(mysql_error());
  if($result){echo "</br></br> succes !";}
 
  }
if (isset($_POST['Enregistrer']))
{ 
  $date = $_POST["date"];
  $client = $_POST["client"];
  $ref = $_POST["reference"];
  $remarques = $_POST["remarques"];
  $sommeTotale=$_POST["sommeTotale"];
 
  $result = mysql_query("INSERT INTO wordpress.wp_infos_commande(reference,dateC,client,remarques,somme_totale,type) VALUES('$ref','$date', '$client','$remarques','$sommeTotale','Devis De Vent')") or die(mysql_error());
  if($result){
  echo 
  "</br> succes infos commande !";
  //recuperation de numero de devis
  $ReqNumRf = mysql_query("SELECT num_dv FROM wp_parametres ; ");
 while ($refNum = mysql_fetch_array($ReqNumRf)) 
    {$num = $refNum[0]; }
 //incrementation de numeros de devis
	$num=$num+1;
    $ReqIncr=mysql_query("UPDATE wordpress.`wp_parametres` SET num_dv='$num' ")or die("erreur d incrementation"); 
 
  }
}
?> 
html
....
<input type="submit" value="Enregistrer" name="Enregistrer" style="width:120px" onclick="PostData(leform.reference.value);" ></input>
.........

Pourriez quelqu un m 'aider ?
merci.

03/03/2014, 01h15
ryan

Hola,

Je n'ai jamais utilisé AJAX dans une boucle, donc ce qui suit est pure supputation.

Il se pourrait que ton problème vienne du fait que tu utilises AJAX en mode asynchrone (ce qui est normal: le premier A de AJAX est pour "asynchrone") , et que la réponse d'une itération de la boucle pourrait revenir après le lancement de la requête de l'itération suivante, ou bien que le PHP côté serveur est un peu saturé par le "bombardement" de requêtes et ne peut les traiter toutes de façon efficace.

Une solution serait d'utiliser AJAX en mode synchrone, ce qui forcerait le javascript à attendre une réponse avant de lancer la requête suivante, ce qui serait une indication que le PHP a bien fini son taf et que donc l'enregistrement est bien sauvé dans ta bdd.

Code:

xhr.open('POST', 'Vente.php', false);

Une autre solution serait de sérialiser les données de ton tableau (en faire une seule longue chaine ), et de faire la découpe de la chaine côté serveur. Il me semble que la limite de longueur pour les données transmises par POST est de 200 Kb, mais à vérifier.
03/03/2014, 08h05
Bovino

Non... cela vient du fait que son code est un non-sens total... :roll:

Tu définis une variable xhr qui est un objet XMLHttpRequest, puis une fois cette variable définie, tu lui affectes des propriétés et méthodes contradictoires dans une boucle for... comment veux-tu que ton navigateur puisse s'y retrouver ?
03/03/2014, 11h52
ihebs

Solution ?

Bonjour,
Merci pour vos réponses .

J'ai essayé déjà avec les deux modes synchrones et asynchrones et avec la fonction ajax.
Quelle est la solution pour mon problème alors?
Est ce qu' envoyer les données dans un tableau peut résoudre le probléme ?
03/03/2014, 15h51
thelvin

Ma foi oui, c'est vrai que normalement on évite de faire plusieurs requêtes d'affilée.
Et que si tu ne fais qu'un seul open(), un seul setRequestHeader() et un seul send(), tu n'auras déjà plus ce problème-là.
03/03/2014, 15h52
Bovino

Bien évidemment, rien ne t'empêche de regrouper tes paramètres histoire de n'avoir qu'une seule requête à faire...

j'essaye de faire une seule requête concatinée
Est ce que c'est efficace et comment je peut récuperer les donées en php
merci :)

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
 xhr.open('POST', 'Vente.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var i=0,tosend="",
      nom,
      description,prix,quantite,
	  total, remise;
	  articles =document.getElementsByName('Varticle[]');	
	for(i; i< articles.length; i++)
  {
    nom    = document.getElementsByName('Varticle[]')[i].value;
	description    = document.getElementsByName('Vdescription[]')[i].value;
	prix    = document.getElementsByName('Vprix[]')[i].value;
	quantite    = document.getElementsByName('Vquantite[]')[i].value;
	remise    = document.getElementsByName('Vremise[]')[i].value;
	total    = document.getElementsByName('Vtotal[]')[i].value;
	tosend=tosend+"nom="+nom+"&prix="+prix+"&description="+description+"&quantite="+quantite+"&remise="+remise+"&total="+total+"&ref="+ref+"&";
  }
  ptosend=tosend.substring(0,tosend.length-2);
 	 xhr.send(ptosend);
}

solution :

Bon, j'ai résolu mon problème.
je mets la solution pour les autres.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 xhr.open('POST', 'Vente.php');
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    var i=0,tosend="",
      nom,
      description,prix,quantite,
	  total, remise;
	  articles =document.getElementsByName('Varticle[]');	
	for(i; i< articles.length; i++)
  {
    nom    = document.getElementsByName('Varticle[]')[i].value;
	description    = document.getElementsByName('Vdescription[]')[i].value;
	prix    = document.getElementsByName('Vprix[]')[i].value;
	quantite    = document.getElementsByName('Vquantite[]')[i].value;
	remise    = document.getElementsByName('Vremise[]')[i].value;
	total    = document.getElementsByName('Vtotal[]')[i].value;
	tosend=tosend+"nom["+i+"]="+nom+"&prix["+i+"]="+prix+"&description["+i+"]="+description+"&quantite["+i+"]="+quantite+"&remise["+i+"]="+remise+"&total["+i+"]="+total+"&";
  }
  ptosend=tosend+"nb="+i+"&ref="+ref;
 	xhr.send(ptosend);
}

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
if (isset($_POST["nom"]))
{ $taille=$_POST["nb"];
$reference=$_POST["ref"];
 
  $names=array();  $descr=array(); $prix=array();$quantite=array();
  $remise=array();$total=array();
  $i=0;
    for ($i=0;$i<=$taille;$i++)
    {$descr[$i]=$_POST["description"][$i];}
  for ($i=0;$i<=$taille;$i++)
    {$names[$i]=$_POST["nom"][$i];}
  for ($i=0;$i<=$taille;$i++)
    {$prix[$i]=$_POST["prix"][$i];}
  for ($i=0;$i<=$taille;$i++)
    {$quantite[$i]=$_POST["quantite"][$i];}
 
	 for ($i=0;$i<=$taille;$i++)
    {$remise[$i]=$_POST["remise"][$i];}
  for ($i=0;$i<=$taille;$i++)
    {$total[$i]=$_POST["total"][$i];}
 
 for ($i=0;$i<=$taille-1;$i++)
{
mysql_query("INSERT INTO wordpress.wp_Devis_Vente(reference,article,prix,description,remise,quantite,total) VALUES('$reference','$names[$i]', '$prix[$i]','$descr[$i]','$remise[$i]','$quantite[$i]','$total[$i]')") or die(mysql_error());
}
  }