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