[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