IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

jQuery Discussion :

insertion de données avec ajax


Sujet :

jQuery

  1. #1
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2013
    Messages : 29
    Par défaut 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 .

  2. #2
    Membre extrêmement actif
    Avatar de Golgotha
    Homme Profil pro
    Full-stack Web Developer
    Inscrit en
    Août 2007
    Messages
    1 387
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France

    Informations professionnelles :
    Activité : Full-stack Web Developer
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2007
    Messages : 1 387
    Billets dans le blog
    1
    Par défaut
    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 ?
    Consultant et développeur full-stack spécialiste du Web
    faq jQuery - règles du forum - faqs web

  3. #3
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2013
    Messages : 29
    Par défaut
    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();
    }
    ?>

  4. #4
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2013
    Messages : 29
    Par défaut
    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';

  5. #5
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2013
    Messages : 29
    Par défaut
    j'ai testé , quand je remplis le formulaire le message enregistrement validé s'affiche mais rien n'est inséré dans la BD !!!

  6. #6
    Membre expérimenté
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juillet 2009
    Messages
    132
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Opérateur de télécommunications

    Informations forums :
    Inscription : Juillet 2009
    Messages : 132
    Par défaut
    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) ?

  7. #7
    Membre averti
    Femme Profil pro
    Étudiant
    Inscrit en
    Août 2013
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : Maroc

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2013
    Messages : 29
    Par défaut
    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

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Réponses: 13
    Dernier message: 30/05/2011, 17h47
  2. Insertion de données avec php5
    Par Ludo75 dans le forum Langage
    Réponses: 3
    Dernier message: 24/08/2010, 15h18
  3. Insertion de données avec Posgretsql
    Par djibril dans le forum PostgreSQL
    Réponses: 3
    Dernier message: 18/05/2004, 11h23
  4. Réponses: 2
    Dernier message: 14/05/2004, 14h32

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo