Salut,
Alors maintenant, ça marche avec la méthode GET mais pas encore avec la méthode POST (ce que je souhaite en définitive !). Configuration : HTML + JAVASCRIPT + PHP
question 1 : Quel argument dois-je passer dans la fonction validForm( ) appelée via onclick dans mon formulaire pour pouvoir utiliser la méthode POST
question 2 : Quelque soit la méthode, que dois-je écrire dans mon fichier PHP pour que un message du type "les données ont été ajoutées !" s'affiche dans la cible "texthint" de ma page HTML via la ligne, située dans le fichier javascript, suivante :
Pour la méthode GET
Code : Sélectionner tout - Visualiser dans une fenêtre à part document.getElement.ById('textHint').innerHTML = xhr.responseText;
Fichier HTML :
Fichier JAVASCRIPT
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Acquisition de données </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="ajouter_deplacement2.css" /> <script type="text/javascript" src="ajouter_deplacement2.js"></script> </head> <body> <div id="content"> <p> Ajout d'un déplacement dans la base de données :</p> <form name="form" action="" method="post" class="PositionForm"> <table> <tr> <td class="LabelForm"> <label for="nom_deplacement">Type de déplacement</label>: </td> <td class="TextForm"> <input type="text" id="nom_deplacement" name="nom_deplacement"/> </td> <td class="AdviceForm"> <div id="txtHint"></div> </td> </tr> </table> <div> <input type="button" value="Valider" onclick="validForm(document.getElementById('nom_deplacement').value)"/> <input type="reset" value="Rétablir"/> </div> </form> </div> </body> </html>
Fichier PHP :
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
49
50
51
52
53
54 // Fonction d'insertion des données dans la base données function validForm(form) { if (document.getElementById('nom_deplacement').value == "") { document.getElementById('txtHint').innerHTML = 'Ce champ est obligatoire !'; return false; } else { var xhr = GetXmlHttpObject(); xhr.onreadystatechange = reportStatus(xhr); //Fonction de suivi de l'état de la requête var url = "test.php"; url = url + "?q=" + form; xhr.open("GET",url,true); xhr.send(null); //xhr.open('post',url,true); //'post' : méthode / '***' : URL absolue ou relative de la page XML / true : pour asynchrone //xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //Fonction appartenant à la méthode POST //var data = 'nom_deplacement=' + document.getElementById('nom_deplacement').value; //xhr.send(data); } } // Fonction de test du BROWSER function GetXmlHttpObject() { var xhr = null; try { xhr = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } catch (err) { try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); // Internet Explorer 6.0+ } catch (err) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); // Internet Explorer 5.5+ } catch (err) { alert('Votre Explorateur Internet ne supporte pas la technologie AJAX !'); } } } return xhr; } // Fonction de test du transfert des données au serveur function reportStatus(xhr) { if (xhr.readyState == 4 && xhr.status == 200) { //readyState --> 0 : uninitialized / 1 : Open / 2 : Sent / 3 : Receiving / 4 : Loaded document.getElementById('txtHint').innerHTML = xhr.responseText; } }
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
49 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php $base="C:\Program Files\EasyPHP 2.0b1\www\projet\AJAX\base_test.mdb"; $table="deplacements"; $column="nom_deplacement"; $q = $_GET["q"]; //data = $_POST["nom_deplacement"]; $sql = "INSERT INTO deplacements (nom_deplacement) VALUES ('" . $q . "')"; //$sql = "INSERT INTO deplacements (nom_deplacement) VALUES ('" . $data . "')"; if (!$conn = new COM("ADODB.Connection")) // Declaration Objet exit("impossible de créer la connection ADODB<br />"); $conn->open("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=$base"); // ouverture du fichier $requete = "$sql"; // Selectionne une table //echo $requete."<BR>"; $resultat = $conn->execute($requete); // execute la requete //$col2 = $resultat->Fields(0); // colonne 2 //echo "<table border=1>"; //while (!$resultat->EOF) // tant que pas le fichier n'est pas terminé //{ // echo "<tr>"; // echo "<td>$col2->value </td>"; // echo "</tr>"; // $resultat->MoveNext(); // enregistrement suivant //} //echo "</table>"; echo $q . " a été rajouté dans la BDD !"; $resultat->Close(); // ferme la requete $conn->Close(); // ferme la connection ?>
Pour la méthode POST :
Fichier HTML :
La modification (par rapport a GET) est visible dans le onclick
Fichier JAVASCRIPT je pense que c'est correct!)
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Acquisition de données </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="ajouter_deplacement2.css" /> <script type="text/javascript" src="ajouter_deplacement2.js"></script> </head> <body> <div id="content"> <p> Ajout d'un déplacement dans la base de données :</p> <form name="form" action="" method="post" class="PositionForm"> <table> <tr> <td class="LabelForm"> <label for="nom_deplacement">Type de déplacement</label>: </td> <td class="TextForm"> <input type="text" id="nom_deplacement" name="nom_deplacement"/> </td> <td class="AdviceForm"> <div id="txtHint"></div> </td> </tr> </table> <div> <input type="button" value="Valider" onclick="validForm(this.from)"/> <input type="reset" value="Rétablir"/> </div> </form> </div> </body> </html>
La modification (par rapport a GET) est visible dans le Else
Fichier PHP : (pas vraiment sûr de moi)
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
49
50
51
52
53
54 // Fonction d'insertion des données dans la base données function validForm(form) { if (document.getElementById('nom_deplacement').value == "") { document.getElementById('txtHint').innerHTML = 'Ce champ est obligatoire !'; return false; } else { var xhr = GetXmlHttpObject(); xhr.onreadystatechange = reportStatus(xhr); //Fonction de suivi de l'état de la requête var url = "test.php"; //url = url + "?q=" + form; //xhr.open("GET",url,true); //xhr.send(null); xhr.open('post',url,true); //'post' : méthode / '***' : URL absolue ou relative de la page XML / true : pour asynchrone xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); //Fonction appartenant à la méthode POST var data = 'nom_deplacement=' + document.getElementById('nom_deplacement').value; xhr.send(data); } } // Fonction de test du BROWSER function GetXmlHttpObject() { var xhr = null; try { xhr = new XMLHttpRequest(); // Firefox, Opera 8.0+, Safari } catch (err) { try { xhr = new ActiveXObject('Msxml2.XMLHTTP'); // Internet Explorer 6.0+ } catch (err) { try { xhr = new ActiveXObject('Microsoft.XMLHTTP'); // Internet Explorer 5.5+ } catch (err) { alert('Votre Explorateur Internet ne supporte pas la technologie AJAX !'); } } } return xhr; } // Fonction de test du transfert des données au serveur function reportStatus(xhr) { if (xhr.readyState == 4 && xhr.status == 200) { //readyState --> 0 : uninitialized / 1 : Open / 2 : Sent / 3 : Receiving / 4 : Loaded document.getElementById('txtHint').innerHTML = xhr.responseText; } }
Si quelqu'un peut m'apporter des précisions sur la méthode POST, ce serait vraiment sympa !
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 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <?php $base="C:\Program Files\EasyPHP 2.0b1\www\projet\AJAX\base_test.mdb"; $table="deplacements"; $column="nom_deplacement"; //$q = $_GET["q"]; data = $_POST["nom_deplacement"]; //$sql = "INSERT INTO deplacements (nom_deplacement) VALUES ('" . $q . "')"; $sql = "INSERT INTO deplacements (nom_deplacement) VALUES ('" . $data . "')"; if (!$conn = new COM("ADODB.Connection")) // Declaration Objet exit("impossible de créer la connection ADODB<br />"); $conn->open("DRIVER={Microsoft Access Driver (*.mdb)};DBQ=$base"); // ouverture du fichier $requete = "$sql"; // Selectionne une table //echo $requete."<BR>"; $resultat = $conn->execute($requete); // execute la requete //$col2 = $resultat->Fields(0); // colonne 2 //echo "<table border=1>"; //while (!$resultat->EOF) // tant que pas le fichier n'est pas terminé //{ // echo "<tr>"; // echo "<td>$col2->value </td>"; // echo "</tr>"; // $resultat->MoveNext(); // enregistrement suivant //} //echo "</table>"; echo $q . " a été rajouté dans la BDD !"; $resultat->Close(); // ferme la requete $conn->Close(); // ferme la connection ?>
Merci
Partager