insertion de données avec ajax

**nana_md** · 02/08/2013, 15h09

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 .

**Golgotha** · 02/08/2013, 15h18

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 ?

**nana_md** · 02/08/2013, 15h33

merci pour votre reponse voila je vais posté le code

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

Code html :

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

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

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
$(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 html :

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

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
<?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();
}
?>

**nana_md** · 02/08/2013, 15h34

et voila ce qui concerne la BD:

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

Code php :

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

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

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

**nana_md** · 02/08/2013, 15h37

j'ai testé , quand je remplis le formulaire le message enregistrement validé s'affiche mais rien n'est inséré dans la BD !!!

**JérémieL** · 02/08/2013, 15h59

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

**nana_md** · 02/08/2013, 17h06

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

insertion de données avec ajax

jQuery

Discussions similaires

Partager

Partager