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] debutant en ajax et je veux rafrechir ma page avec un script


Sujet :

AJAX

  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] debutant en ajax et je veux rafrechir ma page avec un script
    je travail avec Php
    Voila j ai un formulaire pour inserer des données dans 4 tables de ma base de donnees et j'ai pour chaque table un submit
    chaque submit provoque le rechargement de toute la page malgré propre a une table
    alors apparement la solution d apres mes recherches sur le net c Ajax
    et comme je suis debutant en ajax j arrive pas modifier les codes que j ai trouver pour trouver la solution
    voila mon code :
    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
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    <html>
    	<head>
    		<title>Tutoriel Ajax (XHTML + JavaScript + XML)</title>
    		<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
    			}
     
    			/**
    			* Méthode qui sera appelée sur le click du bouton
    			*/
    			function go(){
    				var xhr = getXhr();
    				// On défini ce qu'on va faire quand on aura la réponse
    				xhr.onreadystatechange = function(){
    					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
    					if(xhr.readyState == 4 && xhr.status == 200){
    						leselect = xhr.responseText;
    						// On se sert de innerHTML pour rajouter les options a la liste
    						document.getElementByName('methode').innerHTML = leselect;
    					}
    				}
     
    				// 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
    				sel = document.getElementByName('methode');
    				idmethode = sel.text['idmethode'].value;
    				nom = sel.text['nom'].value;
    				description = sel.text['description'].value;
    				lien = sel.text['lien'].value;
    				xhr.send("idmethode="+idmethode&"nom="+nom&"description="+description&"lien="+lien);
     
    		</script>
    	</head>
    	<body>
    		<h2>Veuillez saisir les données de la méthode :</h2>
    		<form name="form1" method="post" action="methode.php">
    		<fieldset>
    		Entrez l'identificateur de la méthode : <input type="text" name="idmethode"/> <br/>
    		Entrez le nom de la méthode : <input type="text" name="nom"/> <br/>
    		Entrez la description de la methode : <input type="text" name="description"/><br/>
    		Entrez le lien vers la methode : <input type="text" name="lien"/><br/>
     
    		<?php
                    if (isset ($_POST['valider'])){
                    //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();
     
                    // information pour la connection à le DB
                    $host = 'localhost';
                    $user = 'root';
                    $pass = '';
                    $db = 'assvisual';
                    // connection à la DB
                    $link = mysql_connect ($host,$user,$pass) or die ('Erreur : '.mysql_error() );
                    mysql_select_db($db) or die ('Erreur :'.mysql_error());
     
                    //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();
                    }
                    ?>
     
    		<?
    		$link = mysql_connect ("localhost","root","") or die ('Erreur : '.mysql_error() );
    		mysql_select_db("assvisual") or die ('Erreur :'.mysql_error());
     
    		// 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,$link) 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);
     
    		?>
     
    		<input type='button' name='valider' onClick='go()' />
    	</body>
    </html>

  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 : Sélectionner tout - Visualiser dans une fenêtre à part
    xhr.send("idmethode="+idmethode+"&nom="+nom+"&description="+description+"&lien="+lien);
    Tu dois avoir aussi une variable valider dans ton xhr.send laquelle tu récupère dans
    if (isset ($_POST['valider']))
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    xhr.send("idmethode="+idmethode+"&nom="+nom+"&description="+description+"&lien="+lien+"&valider=valeur");

  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
    es ce que tu me donner plus de precision svp
    puisque sa marche tjr pas
    es ce qu j ajoute seulement "&valider=valeur" dans le xhr.send

    ou bien je dois ajouter autre trucs

    mon pbm est bcp plus avec la methode POST
    puisque j ai pas trouver d exemple avec cette methode sur un formulaire ayant des champ de type text

  4. #4
    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
    Tu n'as poster que les variables post idmethode,nom,description,lien mais tu testes dans php avec la variable valider qui n'est pas poster, alors tu dois ajouter la variable valider ou bien tester avec l'un des variables poster comme
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    if(isset($_POST['idmethode']))
    . Les variables postées que tu puisses récupérer dans php sont ce que tu concaténâtes dans xhr.send, les variables sont séparées par & .

  5. #5
    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
    xhr.send("idmethode="+idmethode+"&nom="+nom+"&description="+description+"&lien="+lien+"&valider=Ok");
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type='button' name='valider' value="Ok" onClick='go()' />

    mais tjr y a un pbm ca ne valide meme pas
    es ce que j ai fais une faute de syntaxe dans xhr.sen (para.....

  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 Aider moi Rafrechissement php+ajax
    es ce que il y a une maniere pour adapter le script ajax pour recuperer des données a partir de champs texte
    je travail avec Php+mysql

  7. #7
    Expert éminent

    Homme Profil pro
    Inscrit en
    Janvier 2007
    Messages
    13 474
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations professionnelles :
    Secteur : Finance

    Informations forums :
    Inscription : Janvier 2007
    Messages : 13 474
    Par défaut
    Bonjour,
    ton syntaxe est incorrecte pour la récupération des paramètres :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    sel = document.forms['form1'];
    idmethode = sel.elements['idmethode'].value;
    nom = sel.elements['nom'].value;
    description = sel.elements['description'].value;
    lien = sel.elements['lien'].value;
    				xhr.send("idmethode="+idmethode&"nom="+nom&"description="+description&"lien="+lien);
    Puis il faut que tu définisses un élément pour recevoir la réponse Ajax.
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="methode"></div>
    Tu pourras enfin faire
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementById('methode').innerHTML = leselect;
    Par contre, il faut que ta page ajoutermethode.php renvoie bien le select complet (<select ...> + les <option> + </select>).

    Quelques précisions sur tes erreurs :
    document.getElementsByName retourne un tableau d'objets (d'où le "s") ayant le même name. Pour l'utiliser il faut ajouter un indice :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    document.getElementsByName("name_objet")[0].value   // Par exemple
    Mais de manière générale, il est recommandé d'utiliser les id (forcément unique dans la page), ou de passer par la collection du formulaire (document.forms['name_du_form'].elements['name_element'] ), comme ci-dessus.
    Enfin essaye de conserver une certaine logique : ne donne pas un name="idmethode"

    A+

Discussions similaires

  1. [DEBUTANT] JSP AJAX XMLHttpRequest
    Par hardokin dans le forum Servlets/JSP
    Réponses: 4
    Dernier message: 19/08/2008, 16h06
  2. [AJAX-DEBUTANT] Pb de page précédente
    Par olive_le_malin dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 13/12/2006, 16h31
  3. [débutant] Struts + ajax
    Par chennuo dans le forum Struts 1
    Réponses: 11
    Dernier message: 30/10/2006, 14h43
  4. [AJAX] Ajax en retour undefined
    Par Tempotpo dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 05/04/2006, 10h47

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