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

AJAX Discussion :

[AJAX] ajouter des données à ma table et actualiser mon tableau avec ajax


Sujet :

AJAX

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 47
    Par défaut [AJAX] ajouter des données à ma table et actualiser mon tableau avec ajax
    je suis débutant en Ajax et je raffraichir ma table sans regenerer la page php
    voila mon code (qu'es ce qui manque svp):
    add_methode.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
    <html>
    	<head>
    		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
    	</head>
     
    	<body>
    	<script type="text/javascript" src="ajaxmethode.js"></script>
    <form nom="methode" action ="add_methode.php" method="post">
    <b>Ajouter une methode: </b><br/>
    Identificateur de la methode : <input type="text" id="idmethode" name="idmethode"> <br>
    Nom de la methode : <input type="text" id="nom" name="nom"> <br>
    Description de la methode : <input type="text" id="description" name="description"> <br>
    Lien de la methode : <input type="text" id="lien" name="lien"> <br>
    <input type="button" value="Ajouter utilisateur" onClick=""javascript:addmethode(document.getElementById('idmethode').value,document.getElementById('nom').value,document.getElementById('description').value,document.getElementById('lien').value);" />
    </form>
    </body>
    </html>
    voila mon script php ajoutermethode.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
    50
    51
    52
    53
    <?php
    	header('Content-Type: text/xml');
    	header('Content-Type: text/plain; charset=ISO-8859-1');
    	if(isset($_POST["idmethode"])){
    		$idmethode=$_POST['idmethode'];
    		$nom=$_POST['nom'];
    		$description=$_POST['description'];
    		$lien=$_POST['lien'];
    		$sql = 'INSERT INTO methode VALUES("'.$idmethode.'","'.$nom.'","'.$description.'","'.$lien.'")';
    		//On se connecte
    		mysql_connect("localhost","root","");
    		mysql_select_db("assvisual");
    		mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
    		// on ferme la connexion
    		mysql_close();
    		}
    		//On se connecte
    		mysql_connect("localhost","root","");
    		mysql_select_db("assvisual");
    		// requête SQL qui compte le nombre total d'enregistrements dans la table et qui
    		//récupère tous les enregistrements
    		$select = 'SELECT idmethode,nom,description,lien FROM methode';
    		$result = mysql_query($select) or die ('Erreur : '.mysql_error() );
    		$total = mysql_num_rows($result);
     
    		// si on a récupéré un résultat on l'affiche.
    		if($total) {
        	// début du tableau
        	echo '<table bgcolor="#FFFFFF">'."\n";
            // première ligne on affiche les titres prénom et surnom dans 2 colonnes
            echo '<tr>';
            echo '<td bgcolor="#669999"><b><u>idmethode</u></b></td>';
            echo '<td bgcolor="#669999"><b><u>nom</u></b></td>';
    		echo '<td bgcolor="#669999"><b><u>description</u></b></td>';
    		echo '<td bgcolor="#669999"><b><u>lien</u></b></td>';
            echo '</tr>'."\n";
        	// lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne.    
        	while($row = mysql_fetch_array($result)) {
            echo '<tr>';
            echo '<td bgcolor="#CCCCCC">'.$row['idmethode'].'</td>';
            echo '<td bgcolor="#CCCCCC">'.$row['nom'].'</td>';
    		echo '<td bgcolor="#CCCCCC">'.$row['description'].'</td>';
    		echo '<td bgcolor="#CCCCCC">'.$row['lien'].'</td>';
            echo '</tr>'."\n";
        	}
        	echo '</table>'."\n";
        	// fin du tableau.
    		}
    		else echo 'Pas d\'enregistrements dans cette table...';
     
    		// on libère le résultat
    		mysql_free_result($result);
    ?>
    et enfin mon fichier ajaxmethode.js
    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
     
    function addmethode(idmethode,nom,description,lien){
                 var xhr=null;
     
        		if (window.XMLHttpRequest) { 
            	xhr = new XMLHttpRequest();
        		}
        		else if (window.ActiveXObject) 
        		{
            	xhr = new ActiveXObject("Microsoft.XMLHTTP");
        		}
        		//on définit l'appel de la fonction au retour serveur
        		xhr.onreadystatechange = function() { alert_ajax(xhr); };
        		}
    			// Ici on va voir comment faire du post
    			xhr.open("POST","ajoutermethode.php",true);
    			// ne pas oublier ça pour le post
    			xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    			// ne pas oublier de poster les arguments
    			xhr.send("idmethode=idmethode&nom=nom&description=description&lien=lien");
    			}
    			function alert_ajax(xhr)
    			{
    			var idmethode = document.getElementById('idmethode').value;
    			var nom = document.getElementById('nom').value;
    			var description = document.getElementById('description').value;
    			var lien = document.getElementById('lien').value;
     
    			}

  2. #2
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Salut,
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="button" value="Ajouter utilisateur" onClick=""javascript:addmethode(document.getElementById('idmethode').value,document.getElementById('nom').value,document.getElementById('description').value,document.getElementById('lien').value);" />
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="button" value="Ajouter utilisateur" onclick="addmethode(document.getElementById('idmethode').value,document.getElementById('nom').value,document.getElementById('description').value,document.getElementById('lien').value);" />
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    header('Content-Type: text/xml');
    	header('Content-Type: text/plain; charset=ISO-8859-1');
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    header('Content-Type: text/html; charset=ISO-8859-1');
    Tu connectes plusieurs fois, de préférence tu mais la connexion dans une fichier à part et que l'inclue dans tous ce qu'il l'utilise.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
    ............
    function alert_ajax(xhr)
    			{
    			var idmethode = document.getElementById('idmethode').value;
    			var nom = document.getElementById('nom').value;
    			var description = document.getElementById('description').value;
    			var lien = document.getElementById('lien').value;
     
    			}
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
     
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
    function alert_ajax(xhr)
    			{
    			if(xhr.readyState !=4)
    			    {document.getElementById('tonDivPourLeTableau').innerHTML='Chargement en cours'}
                            else
                             {document.getElementById('tonDivPourLeTableau').innerHTML=xhr.responseText}
    			}

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 47
    Par défaut
    Merci beaucoup

  4. #4
    Membre averti
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 47
    Par défaut
    il me reste un soucie
    implementer une fonction clean pour vider les champs texte aprés affichage du résultat

  5. #5
    Rédacteur/Modérateur
    Avatar de andry.aime
    Homme Profil pro
    Inscrit en
    Septembre 2007
    Messages
    8 391
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Ile Maurice

    Informations forums :
    Inscription : Septembre 2007
    Messages : 8 391
    Par défaut
    Salut,
    <form nom="methode" action ="add_methode.php" method="post">
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <form name="methode" action ="add_methode.php" method="post">
    Pour la fonction clean
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    function clean()
    {
       document.forms['methode'].reset();
    }

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Mars 2009
    Messages
    47
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mars 2009
    Messages : 47
    Par défaut
    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
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
     
    <script type='text/javascript'>
     
    			function getXhr(){
                                    var xhr = null;
    				if(window.XMLHttpRequest) // Firefox et autres
    				   xhr = new XMLHttpRequest();
    				else if(window.ActiveXObject){ // Internet Explorer
    				   try {
    			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
    			            } catch (e) {
    			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
    			            }
    				}
    				else { // XMLHttpRequest non supporté par le navigateur
    				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest...");
    				   xhr = false;
    				}
                                    return xhr;
    			}
                //réinitialiser les champs du formulaire
     
                /**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
    			function go(idmethode,nom,description,lien){
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function()  {
                    if(xhr.readyState !=4){
                        document.getElementById('methode').innerHTML='Chargement en cours'}
                            else
                             {document.getElementById('methode').innerHTML=xhr.responseText;
                              document.forms['method'].reset();
    }
     
                    }
     
    				// Ici on va voir comment faire du post
    				xhr.open("POST","ajoutermethode.php",true);
    				// ne pas oublier ça pour le post
    				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
    				// ne pas oublier de poster les arguments
    				xhr.send("idmethode="+idmethode+"&nom="+nom+"&description="+description+"&lien="+lien);
    			}
     
    		</script>
    <body>
    <h2>Veuillez saisir les donnees de la methode :</h2>
    <form name="Method" method="post" action="index.php">
    <fieldset>
    Entrez l'identificateur de la méthode : <input type="text" id="idmethode" nom="idmethode"/> <br/>
    Entrez le nom de la méthode : <input type="text" id="nom" nom="nom"/> <br/>
    Entrez la description de la methode : <input type="text" id="description" nom="description"/><br/>
    Entrez le lien vers la methode : <input type="text" id="lien" nom="lien"/><br/>
     
    <?php
    if (isset ($_POST['idmethode'])){
    //On récupère les valeurs entrées par l'utilisateur :
    $idmethode=$_POST['idmethode'];
    $nom=$_POST['nom'];
    $description=$_POST['description'];
    $lien=$_POST['lien'];
    //On se connecte
    connectMaBase();
    //On prépare la commande sql d'insertion
    $sql = 'INSERT INTO methode VALUES("'.$idmethode.'","'.$nom.'","'.$description.'","'.$lien.'")';
    /*on lance la commande (mysql_query) et au cas où,
    on rédige un petit message d'erreur si la requête ne passe pas (or die)
    (Message qui intègrera les causes d'erreur sql)*/
    mysql_query ($sql) or die ('Erreur SQL !'.$sql.'<br />'.mysql_error());
    // on ferme la connexion
    mysql_close();
    }
     
     
     
    //On se connecte
    connectMaBase();
    // requête SQL qui compte le nombre total d'enregistrements dans la table et qui
    //récupère tous les enregistrements
    $select = 'SELECT idmethode,nom,description,lien FROM methode';
    $result = mysql_query($select) or die ('Erreur : '.mysql_error() );
    $total = mysql_num_rows($result);
     
    // si on a récupéré un résultat on l'affiche.
    if($total) {
        // début du tableau
        echo '<div id="methode">';
        echo '<table bgcolor="#FFFFFF">'."\n";
            // première ligne on affiche les titres prénom et surnom dans 2 colonnes
            echo '<tr>';
            echo '<td bgcolor="#669999"><b><u>idmethode</u></b></td>';
            echo '<td bgcolor="#669999"><b><u>nom</u></b></td>';
                    echo '<td bgcolor="#669999"><b><u>description</u></b></td>';
                    echo '<td bgcolor="#669999"><b><u>lien</u></b></td>';
            echo '</tr>'."\n";
        // lecture et affichage des résultats sur 2 colonnes, 1 résultat par ligne.
        while($row = mysql_fetch_array($result)) {
            echo '<tr>';
            echo '<td bgcolor="#CCCCCC">'.$row['idmethode'].'</td>';
            echo '<td bgcolor="#CCCCCC">'.$row['nom'].'</td>';
                    echo '<td bgcolor="#CCCCCC">'.$row['description'].'</td>';
                    echo '<td bgcolor="#CCCCCC">'.$row['lien'].'</td>';
            echo '</tr>'."\n";
        }
        echo '</table>'."\n";
        // fin du tableau.
        echo '</div>';
    }
    else echo 'Pas d\'enregistrements dans cette table...';
     
    // on libère le résultat
    mysql_free_result($result);
     
    ?>
    <input type="button" value="Ajouter utilisateur" onclick="go(document.getElementById('idmethode').value,document.getElementById('nom').value,document.getElementById('description').value,document.getElementById('lien').value);" />

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

Discussions similaires

  1. [AC-2007] Ajouter des données à une table
    Par glooping dans le forum IHM
    Réponses: 5
    Dernier message: 16/09/2009, 10h49
  2. Réponses: 1
    Dernier message: 12/11/2008, 10h34
  3. Réponses: 3
    Dernier message: 26/10/2008, 11h10
  4. Ajouter des données Excel à une table SANS références?
    Par Miss Ti dans le forum VBA Access
    Réponses: 6
    Dernier message: 12/10/2007, 18h58
  5. [MySQL] Ajouter des données dans une table avec la cmd update
    Par pierrot10 dans le forum PHP & Base de données
    Réponses: 7
    Dernier message: 25/09/2007, 19h54

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