Formulaire Ajax

[Gotcha]

Voilà comment faire un formulaire avec du code typiquement AJAX.
On lance la requête en asynchrone (on ne reste pas bloqué en attendant le résultat et en plus on ne change pas de page pour insèrer les données dans la base).

Code Javascript :

Code: Tout sélectionner

function maFonctionAjax(Id, Nom)
{
  var OAjax;
  if (window.XMLHttpRequest) OAjax = new XMLHttpRequest();
  else if (window.ActiveXObject) OAjax = new ActiveXObject('Microsoft.XMLHTTP');
  OAjax.open('POST',"maPageDeRequPHP.php",true);
  OAjax.onreadystatechange = function()
  {
      if (OAjax.readyState == 4 && OAjax.status==200)
      {
          if (document.getElementById)
          {   
              if (OAjax.responseText =='true') { /* OK */
                    document.getElementById('msg').innerHTML='<font color=GREEN>'+OAjax.responseText+'</font>';
              }else{                             /* PAS OK */
                    document.getElementById('msg').innerHTML='<font color=RED>'+OAjax.responseText+'</font>';
              }
          }     
      }
  }
  OAjax.setRequestHeader('Content-type','application/x-www-form-urlencoded');
  OAjax.send('Id='+Id+'&Nom='+Nom);                 
}


Code Html:

Code: Tout sélectionner

<form method="post" onsubmit="maFonctionAjax(this.Id.value,this.Nom.value);return false" action="">
    <table border="0" cellspacing="0">
    <tr>
      <td colspan=2>
        Formulaire Ajax
      </td>
    </tr>
      <tr>
        <td>Id:</td>
        <td>
          <input name="Id" id="Id" type="text"></td>
      </tr>
      <tr>
        <td>Nom:</td>
        <td><input name="Nom" id="Nom" type="text"></td>
      </tr>
      <tr>
        <td colspan="2"><input type="submit" value="envoyer"  /></td>
      </tr>
    </table>
</form>
<div id="msg"></div>


Code PHP (maPageDeRequPHP.php) :

Code: Tout sélectionner

<?
session_start();

$erreurs=array();//tableau qui stocke les erreurs.

if(!$_POST['Id']){
    $erreurs[]='Id: Veuillez encoder un Id';
}

if(!$_POST['Nom']){
    $erreurs[]='Nom: Veuillez encoder un Nom';
}

if(count($erreurs)==0)
{
   
    //ici tu enregistres les valeurs dans la bdd
 
    echo "true";//cette valeur sera traité par ajax est vaut dire que tt passe pour le bien
}
else
{
    echo "<p class='erreur'>";
        for($i=0;$i<count($erreurs);$i++)
        {
        echo "- ".$erreurs[$i].".<br />";
        }
    echo "</p>";
}
?>


[gael49]

Merci Gotcha pour cet exemple d'Ajax. J'ai découvert ça il y a quelques mois et ça a changé ma façon de programmer, c'est vraiment très agréable pour l'utilisateur. J'avais lu qu'il y avait des failles dans Ajax, je ne sais pas où ça en est ...? Pour l'instant, je ne l'utilise que sur l'Intranet de ma boîte de toute façon.

[Gotcha]

Merci Gotcha pour cet exemple d'Ajax. J'ai découvert ça il y a quelques mois et ça a changé ma façon de programmer, c'est vraiment très agréable pour l'utilisateur. J'avais lu qu'il y avait des failles dans Ajax, je ne sais pas où ça en est ...? Pour l'instant, je ne l'utilise que sur l'Intranet de ma boîte de toute façon.

il n'y a pas de solution miracle mais voici ici un article qui explique en quelques mots les problèmes et quelques sotlutions (http://www.journaldunet.com/developpeur ... rite.shtml)

voici un extrait :

Utiliser un framework Ajax
Une façon de protéger un site contre le détournement de code JavaScript est d'utiliser un des framework Ajax qui sont préprogrammés (pas tous encore, c'est vrai) pour se défendre contre les attaques. Les statistiques montrent qu'un quart de tous les utilisateurs d'Ajax créent leurs propres mécanismes Ajax propriétaire. Ce fait est alarmant car les développeurs non éduqués laissent très fréquemment des failles de sécurité dans leurs applications, lesquelles rendent ces applications vulnérables aux attaques.

» Refuser des requêtes malveillantes
Si le choix de développer son propre mécanisme Ajax a été fait, il y existe heureusement une possibilité de protéger son application Ajax des attaques. La solution consiste à attacher un paramètre difficile à deviner à chaque requête serveur, par exemple en ajoutant un cookie à la requête et en contrôlant sa valeur sur le serveur : si les deux valeurs correspondent, la requête est considérée valide. Par exemple :

Code: Tout sélectionner

<script>
function sendRequest() {
var req = new XMLHttpRequest();
var cookie = "cookie="+escape(document.cookie);
req.open("POST", someUrl, true);
req.send(cookie);
}
</script>


[chucky69]

Bonjour,

Super exemple que j'ai pu mettre en place rapidement.

Je rencontre toutefois un soucis.

J'ai parmis mes champs de saisi un textarea avec tinymce.
Le post envoyé est donc du type

Code: Tout sélectionner

<p>toto</p>

...et ça marche impeccable.
Dans les input text, tout fonctionne bien, le post correspond à "toto", et ça marche aussi si on rentre du texte avec des accents, exemple "école".

Si dans le textarea je fais une saisie avec des accents, l'insert en base de données ne fonctionne plus ou partiellement, l'insert fonctionne jusqu'au caractère accentué....et c'est le cas aussi dans les input text si je saisi <p>éé</p>

Quand je fais une alert dans le js, je vois bien le formatage des variables postées et mon "éé" est traduit en code html par

Code: Tout sélectionner

<p>&eacute;&eacute;</p>

Dans ma page php, ça ne marche que si je réaffecte la même valeur à ma variable comme suit :

Code: Tout sélectionner

$commentaire=addslashes($_POST['commentaire']);
$commentaire="<p>&eacute;&eacute;</p>";

Je ne sais plus quoi faire

Merci d'avance pour votre aide

[chucky69]

en faisant des encodeURIComponent() sur les valeurs avant de les envoyer ça fonctionne

[Pac428]

Super content pour toi Chucky

D'un autre côté, comme le sujet date de 2007, attend pas trop de réponse

Bonne continuation et ++

[soumia22]

SALUT ,
j'ai pas su faire fonctionner se code ,qlq pour m'aider .

MERCI