[AJAX] informations complémentaires AJAX

Version imprimable

14/01/2011, 16h36
gabest

[AJAX] informations complémentaires AJAX

Bonjour

Dans une page j'ai un tableau qui est rempli par le visiteur. Les données ainsi saisies doivent être envoyées au serveur pour être traitées.

Depuis deux jours je lis bouquins et tutoriels sans rien trouver qui corresponde à mon cas. La plupart du temps sont décrits comment récupérer des données sur le serveur et les renvoyer au client. Mais moi je souhaite collecter des données, avec javascript, puis les envoyer au serveur pour les traiter.

Cela est-il possible en utilisant XMLHttpresquest?

Ou puis je trouver un tutoriel capable enfin de m'éclairer?
14/01/2011, 17h03
andry.aime

Bonjour,

Tu récupères les données saisie et l'envoie au serveur via AJAX, du coté serveur tu récupères les données et les sauvegarder dans la base. Si l'enregistrement s'est bien effectué,tu retournes un petit message pour dire qu'il y a pas d'erreur et tu faits un append sur la page pour afficher les données saisie (faq).
Cette problème est déjà résolue mais fait une recherche sur ce forum.

A+.
14/01/2011, 17h18
gabest

En fait c'est bien comme cela que j'ai procédé, mais je n'obtiens rien.
Je crée un objet XMLHttprequest, je lance la méthode open avec "POST", l'URL du PHP qui doit traiter les données (les déposer dans un dossier donné sous forme de fichier csv). Je lance la méthode setRequestHeader("Content-Type", "application/x-www-form-urlencoded") pour indiquer que je vais passer du texte en paramètre, et enfin je lance la méthode send avec ce texte(une chaine de caractères) en paramètre.

Je ne vois rien arriver dans mon script php.
14/01/2011, 18h01
andry.aime

on peut voir ton Code?

Voici le js qui prépare la chaine de caractère et l'envoi, Traitement_commandes.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
41
42
43
44
 
function EnvoyerCommande() {
    /*
     *    A ce stade nous allons copier tous les éléments du tableau de la commande dans un fichier csv. Pour cela on utilse :
     *            1- le nom du dossier (dossier établissement) :
     *            2- la liste des modèles sélectionnés
     *            3- la liste des lignes de commandes
    */
    var cde = '';
    var ligne = '';
 
    ligne = dossierCourant + ";";
    for(var i=0;i<nbModeles;i++) {
        if( i<nbModeles-1 ) {
            ligne = ligne + listeModeles[i] + ";";
        }
        else {
            ligne = ligne + listeModeles[i] + ".";
        }
    }
    cde = cde + ligne;
        for(var i=0;i<listeEleves.length;i++) {
            ligne = listeEleves[i].toString() + ";";
            for(var j=0;j<nbModeles;j++) {
                if( j<nbModeles-1 ) {
                    ligne = ligne + listeLGNCDES[i].qFields[j].value + ";";
                }
                else {
                    ligne = ligne + listeLGNCDES[i].qFields[j].value;
                }
            }
            if( i<listeLGNCDES.length-1 ) {
                cde = cde + ligne + '.';
            }
            else {
                cde = cde + ligne;
            }
        }
 
    var request = getXHR();
    request.open("POST","./Scripts/Traitement_commande.php",true);
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.send(cde);
}

et le php, Traitement_commande.php

Code:

1
2
3
4
5
6
7
8
 
<html>
<?php
    // récupération des données et création des tables horizontales elles rangées dans une table verticale.
    // enregitrement de ces données sous forme de fichier csv
    echo 'et un peu de texte'.$_Post['cde'].'<br>';
?>
</html>

En réponse le script php affiche : et un peu de texte<br>

14/01/2011, 18h42
andry.aime

1-

Code:

request.send("cde="cde);

2-

Code:

$_POST['cde']

3-tu dois utiliser onreadystatechange pour récupérer le retour depuis le serveur coté javascript.

A+.
14/01/2011, 18h51
gabest

avec : request.send("cde="cde);

j'obtiens le message suivant : missing ) after argument list
14/01/2011, 18h55
andry.aime

Code:

request.send("cde="+cde);

:aie:

Code:

1
2
3
4
5
6
7
8
9
 
    var request = getXHR();
    request.open("POST","./Scripts/Traitement_commande.php",true);
    request.onreadystatechange = function() {
        if( request.readyState == 1 ) {            
            request.setRequestHeader("Content-Type", "text/xml");        //"application/x-www-form-urlencoded");            
        }
    }
    request.send("cde="+cde);

J'obtiens toujours le même résultat, rien dans mon php

Bonjour,

Code:

1
2
3
4
5
6
7
8
9
 var request = getXHR();
    request.open("POST","./Scripts/Traitement_commande.php",true);
    request.onreadystatechange = function() {
        if(request.readyState == 4 && request.status == 200) {            
            alert (request.responseText);  
        }
    }
    request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    request.send("cde="+cde);

A+.

15/01/2011, 10h27
gabest

merci andry.aime

Je m'appuie sur un livre Javascript pour Web 2.0 (Thierry Templier) et sur ce que j'y ai compris, je n'avais aucune chance de trouver la solution. Il y est notamment écrit que "la méthode setRequestHeader ne peut être utilisée que lorsque la valeur de la propriété readyState de l'objet équivaut à open (1).