[AJAX] Insertion de données (formulaire) dans une base Access : ASP JavaScript

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 :

Code:

document.getElement.ById('textHint').innerHTML = xhr.responseText;

Pour la méthode GET

Fichier HTML :

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
<!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 JAVASCRIPT

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
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;
		}
	}

Fichier 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
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

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
<!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>

Fichier JAVASCRIPT :(je pense que c'est correct!)

La modification (par rapport a GET) est visible dans le Else

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
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;
		}
	}

Fichier PHP : (pas vraiment sûr de moi)

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
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 
?>

Si quelqu'un peut m'apporter des précisions sur la méthode POST, ce serait vraiment sympa !

Merci