Il y a actuellement 118 visiteurs
Samedi 15 Août 2020
accueilactualitésdossierscomparer les prixtélécharger gratuitement vos logicielsoffres d'emploiforum informatique
Connexion
Créer un compte

Formulaire Ajax

Besoin d'aide pour configurer un serveur ? Vous souhaitez obtenir des conseils pour référencer votre site ? Un petit souci pour accéder à votre FTP ? Des soucis de programmation en PHP / ASP / HTML / XHTML / XML / XSLT / CSS / ReactJS / AngularJS / VueJS / CGI / PERL / C / MySQL / PostgreSQL ??? Nous avons peut-être la solution dans ce forum ...

Formulaire Ajax

Message le 22 Aoû 2007 10:50

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>";
}
?>
Avatar de l'utilisateur
Gotcha
Expert(e)
Expert(e)
 
Messages: 742
Inscription: 04 Déc 2002 11:23
Localisation: c:\Belgium\Namur
 


Message le 22 Aoû 2007 17:25

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.
“It has to start somewhere, it has to start sometime, what better place than here, what better time than now?”
Avatar de l'utilisateur
gael49
Expert(e)
Expert(e)
 
Messages: 1932
Inscription: 07 Sep 2004 20:11
Localisation: Les Mauges
 

Message le 23 Aoû 2007 07:51

gael49 a écrit: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>

Avatar de l'utilisateur
Gotcha
Expert(e)
Expert(e)
 
Messages: 742
Inscription: 04 Déc 2002 11:23
Localisation: c:\Belgium\Namur
 

Re: Formulaire Ajax

Message le 20 Sep 2011 17:44

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
Visiteur
Visiteur
 
Messages: 2
Inscription: 20 Sep 2011 17:14
 

Re: Formulaire Ajax

Message le 23 Sep 2011 10:59

en faisant des encodeURIComponent() sur les valeurs avant de les envoyer ça fonctionne
chucky69
Visiteur
Visiteur
 
Messages: 2
Inscription: 20 Sep 2011 17:14
 

Re: Formulaire Ajax

Message le 23 Sep 2011 11:06

Super content pour toi Chucky :D

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

Bonne continuation et ++ ;)
Image
En cas de problème constaté sur un sujet, contactez un modérateur par MP svp. N'intervenez pas vous-même. Merci bien.
Avatar de l'utilisateur
Pac428
Moderateur
Moderateur
 
Messages: 27136
Inscription: 23 Mai 2006 13:25
Localisation: Le Goulag du Maine.
 

Re: Formulaire Ajax

Message le 23 Avr 2012 00:12

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

MERCI
soumia22
Visiteur
Visiteur
 
Messages: 1
Inscription: 22 Avr 2012 23:34
 



Sujets similaires

Message Créer un formulaire sur mesure
Bonjour à tous,Voilà je me retrouve face à un petit problème.Au sein de mon entreprise, nous aimerions créer un formulaire de validation à nos nouveaux clients. Je me suis renseigné sur diverses solutions mais aucune ne semble pouvoir répondre entièrement à ma problématique.Pour faire simple, voici ...
Réponses: 0

Message Formulaire conditionnel avec html et java script
Bonjour,Je veux faire un formulaire mconditionnel aux choix de produit et de quantité.Actuellement j'ai 3 produits avec 2 choix de format et selon le format choisit, j'ai 2 type de quantité.Cela marche actuellement, mais je voudrais que le client puisse choir plus de 1 produits et c'est là que ça se ...
Réponses: 19

Message envoi formulaire via outlook ou outlook express 6
Bonjour je ne peux plus envoyer de formulaire html via outlook, lorsque je clique sur envoi j'ai bien de message d'IE qui me dit que mon formulaire va être soumis par logiciel email, outlook ou outlook express (j'ai fait le test sur les 2) s'ouvre, l'email apparait bien avec mon adresse email et l' ...
Réponses: 3

Message [réglé] Sondage formulaire montage config
je comprend, ca fait trop usine Supprimez ce topic quand vous avez une minute
Réponses: 4

Message ajax + jsp +servlet
Bonjour,J'aimerai ajouter de l'AJAX dans un projet mais je ne sais pas du tout comment cela fonctionne. J'ai regarder plusieurs tuto mais pas très satisfaisant.Est ce que quelqu'un connaît un bon tuto ou exemple avec l'utilisation de AJAX dans une structure avec jsp et servlet?Comme par exemple une ...
Réponses: 1

Message Problème Batterie Packard Bell AJAX C2
Bonjour, j'ai un packard bell AJAX C2 enfin qu'on ma passé à réparer, le problème c'est la batterie.Quand la batterie est placé, le pc s'allume mais s'éteint, donc obligé d'enlever la batterie pour l'allumer, j'ai racheté une batterie neuve mais toujours la même chose.Cordialement
Réponses: 1

Message Insérer un formulaire
Bonjour,Je souhaiterais insérer un formulaire sur mon site du type:Adresse Email :Que souhaitez vous?ensuite 3 boutons avec 3 choixpuis envoyer.Voici ce que j'ai fait en m'aidant un peu mais je ne sais pas si tout est correct :Code: Tout sélectionner[color=#0000FF]<form method="post& ...
Réponses: 8


Qui est en ligne

Utilisateurs parcourant ce forum: Aucun utilisateur enregistré et 2 invités


.: Nous contacter :: Flux RSS :: Données personnelles :.