insertion de données avec ajax

Version imprimable

02/08/2013, 15h09
nana_md

insertion de données avec ajax

Bonjour,

Je travaille sur un tp avec PHP et JavaScript je voulais insérer une requête dans le code JavaScript.

Ce n'est pas possible de le faire directement avec du JavaScript mais je dois passer par de l'ajax.

Pour le faire j'ai suivi un exemple dans ce site.

j'ai essayé le code mais l'insertion dans la base de donnée ne s'effectue pas .
02/08/2013, 15h18
Golgotha
Bonjour,

la description du problème n'est pas assez précis pour qu'on puisse t'aider.

Nous avons besoin de plus d'information.
- Message d'erreur ?
- Quel est ton code source ?
- Quel est la structure de ta table ?

merci pour votre reponse voila je vais posté le code

1-Le script jQuery qui permet l’envoie des données en Ajax:

Code:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>

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
$(function() {
$(".submit").click(function() {
	/* VALUES */
    var nom = $("#nom").val();
	var prenom = $("#prenom").val();
	var adresse = $("#adresse").val();
	var zip = $("#zip").val();
	var ville = $("#ville").val();
	var telephone = $("#telephone").val();
	var email = $("#email").val();
	/* DATASTRING */
    var dataString = 'nom='+ nom+'&prenom='+ prenom +'&adresse='+ adresse +'&zip='+ zip +'&ville='+ ville +'&telephone='+ telephone +'&email='+ email;
	if(nom=='' || prenom=='') {
		$('.success').fadeOut(200).hide();
		$('.error').fadeOut(200).show();
		/* UNCOMMNENT TO SEND TO CONSOLE */
		/* console.log ("SOMETHING HAPPENS"); */
	} else {
		$.ajax({
		    type: "POST",
		    url: "join.php",
		    data: dataString,
		    success: function(){
			$('.success').fadeIn(200).show();
		    	$('.error').fadeOut(200).hide();
			/* UNCOMMNENT TO SEND TO CONSOLE */
			/* console.log (dataString); console.log ("AJAX DONE"); */
		   }
		});
	}//EOC
	return false;
}); //EOF
});

2-Le formulaire qui récolte les données:

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
<div id="container">
	<form autocomplete="off" enctype="multipart/form-data" method="post" name="form">
		<div class="info">
			<span class="error" style="display:none"><h2>DONN&Eacute;ES INVALIDE</h2></span>
			<span class="success" style="display:none"><h2>ENREGISTREMENT FAIT</h2></span>
		</div>
		<div class="formLayout">
			<table cellpadding="2" cellspacing="2" border="0">
			<!-- INPUTS -->
			<tr>
				<td valign="top"><label>Nom</label></td>
				<td valign="top"><input id="nom" name="nom" type="text" maxlength="255" tabindex="1" size="60"/></td>
			</tr>
			<tr>
				<td valign="top"><label>Pr&eacute;nom</label></td>
				<td valign="top"><input id="prenom" name="prenom" type="text" maxlength="255" tabindex="1" size="60"/></td>
			</tr>
			<tr>
				<td valign="top"><label>Adresse</label></td>
				<td valign="top"><textarea rows="4" cols="50" name="adresse" id="adresse"></textarea></td>
			</tr>
			<tr>
				<td valign="top"><label>Ville</label></td>
				<td valign="top"><input id="ville" name="ville" type="text" maxlength="255" tabindex="1" size="60"/></td>
			</tr>
			<tr>
				<td valign="top"><label>Code postal</label></td>
				<td valign="top"><input id="zip" name="zip" type="text" maxlength="255" tabindex="1" size="20"/></td>
			</tr>
			<tr>
				<td valign="top"><label>T&eacute;l&eacute;phone</label></td>
				<td valign="top"><input id="telephone" name="telephone" type="text" maxlength="255" tabindex="1" size="20"/></td>
			</tr>
			<tr>
				<td valign="top"><label>Email</label></td>
				<td valign="top"><input id="email" name="email" type="text" maxlength="255" tabindex="1" size="60"/></td>
			</tr>
			<!-- BTN -->
			<tr>
				<td>&nbsp;</td>
				<td valign="top">
			<input type="submit" value="ENVOYER" class="submit"/>
				</td>
			</tr>
		</table>
	</div>
</form>
</div><!--container-->

3-Le fichier join.php qui permet l’insertion en BDD:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php 
/* join.php */
//include db configuration file
include_once("config.php");
if($_POST)
{
	/* VALUES */
	$nom=$_POST['nom'];
	$prenom=$_POST['prenom'];
	$adresse=$_POST['adresse'];
	$zip=$_POST['zip'];
	$ville=$_POST['ville'];
	$telephone=$_POST['telephone'];
	$email=$_POST['email'];
	$datetime = date('Y-m-d H:i:s');
	mysql_query("INSERT INTO people (nom, prenom, adresse, zip, ville, telephone, email, created_on, updated_on) VALUES ( '".utf8_decode($nom)."', '".utf8_decode($prenom)."', '".utf8_decode($adresse)."', '".utf8_decode($zip)."', '".utf8_decode($ville)."', '".utf8_decode($telephone)."', '".utf8_decode($email)."', '".$datetime."','".$datetime."')");
} else { 
	header('HTTP/1.1 500 Looks like mysql error, could not insert record!');
	exit();
}
?>

et voila ce qui concerne la BD:

Le fichier config.php pour se connecter à la BDD hecube_demo:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<?php 
	########## MySql details (Replace with yours) ############# $username = "root"; //mysql username
$password = "root"; //mysql password
$hostname = "localhost"; //hostname
$databasename = 'hecube_demo'; //databasename
 
$connecDB = mysql_connect($hostname, $username, $password);
 
// Check connection
if (!$connecDB) {
  	die('Could not connect: ' . mysql_error());
  }
 
$db_selected = mysql_select_db($databasename,$connecDB);
 
// Check DB
if (!$db_selected) {
  die ('Can\'t use : ' . mysql_error());
  }
 
mysql_close($connecDB);
 
?>

La structure de la table people de notre BDD hecube_demo. Attention, les données vont être stockées en utf8:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
CREATE TABLE `people` (
	`person_id` int(10) NOT NULL AUTO_INCREMENT,
	`nom` varchar(255) DEFAULT NULL,
	`prenom` varchar(255) DEFAULT NULL,
	`adresse` varchar(255) DEFAULT NULL,
	`zip` varchar(255) DEFAULT NULL,
	`ville` varchar(255) DEFAULT NULL,
	`telephone` varchar(255) DEFAULT NULL,
	`email` varchar(255) DEFAULT NULL,
	`created_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
	`updated_on` datetime NOT NULL DEFAULT '0000-00-00 00:00:00',
	PRIMARY KEY (`person_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 COMMENT='demo for ajax, jquery, mysql';

02/08/2013, 15h37
nana_md

j'ai testé , quand je remplis le formulaire le message enregistrement validé s'affiche mais rien n'est inséré dans la BD !!!
02/08/2013, 15h59
JérémieL

Bonjour,

Utilise les balises CODE pour formater le code que tu nous présentes, s'il te plait.

Est-ce que le fichier join.php est bien exécuté ? Probablement, vu que la méthode join retourne success. Dans ce cas-là c'est peut-être un problème au niveau du PHP (auquel il faudrait poster dans la section PHP) ?
02/08/2013, 17h06
nana_md

merci pour la remarque je m'excuse c'est mon premier poste ; pour le problème de l résolu j'ai trouver que dans le fichier config.php de la connexion a la bd j'avais "mysql_close($connecDB);" qui s'execute avant l'insertion