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

**polothentik** · 07/04/2008, 12h44

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Pour la méthode GET

Fichier HTML :

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

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

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>

Fichier JAVASCRIPT

je pense que c'est correct!)

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

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

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

**polothentik** · 09/04/2008, 12h19

Finalement, ça commence à pas mal fonctionner

! La méthode POST marche très bien (je posterai mais fichier HTML JAVASCRIPT PHP quand je serais sûr qu'elle est correcte au niveau de la synthaxe)

Je rencontre tout de même un problème pour renvoyer un message de confirmation de l'insertion des données dans la BDD à partir du fichier PHP dans un div créé à cet effet.

Quelqu'un aurait-il une précision à ce sujet ??

Merci d'avance !

code PHP actuel : (problème renvoi d'un message dans le div du code HTML)

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
<!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";
$column2 = "logo_deplacement";
 
$data = $_POST["nom_deplacement"];
$data2 = $_POST["logo_deplacement"];
 
$sql = "INSERT INTO deplacements ($column,$column2) VALUES ('" . $data . "','" . $data2 . "')";
 
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
 
$resultat = $conn->execute($requete);                                                                                                     // execute la requete 
 
//echo $data . " a été rajouté dans la BDD !"; 
$resultat->Close();                                                                                                                       // ferme la requete 
 
$conn->Close();
                                                                                                                                                      // ferme la connection 
?>

Au passage, l'entête DOCTYPE était-elle nécessaire dans ce fichier "appellé" ?

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

JavaScript

Discussions similaires

Partager

Partager