Script php avec AJAX

Hugo38 · 29 Janvier 2013

Bonjour,

J'ai une question assez simple mais à laquelle je ne trouve pas de réponse.

Est il possible de lancer un script php avec ajax simplement ?

Explications :

J'ai un formulaire html, un script php qui traite ce formulaire ( récuperation des données entrées, insertion en base de donnée et affichage d'erreur s'il y en a ).

Mon but est d'afficher les ereurs sur la page sans la rechargé.

Puis je juste lancer mon script php en ajax ? Car tout ce que je trouve il faut creer des objets en js etc..., moi je veux juste lancer ce script qui fonctionne en rechargeant la page sans la recharger.

Merci par avance.

**captain_torche** · 29 Janvier 2013

Bien sûr que tu peux exécuter un script PHP via JavaScript.

Ensuite, il faudra voir comment tu comptes gérer les erreurs de ton formulaire. Le plus simple serait peut-être de faire regénérer le code HTML du formulaire (Message d'erreur compris) par le script PHP, et remplacer le formulaire original par les données renvoyées en AJAX par le script.

Hugo38 · 29 Janvier 2013

Enfait j'ai déja tout le php.

Mon script genere les erreur si il y en a dans une variable $erreur

Et dans le html j'affiche toujours $erreur sauf que je l'ai initialisé à vide, donc elle est toujours affiché mais pas forcement visible et au post du formulaire la pge se recharge et rempli ou non $erreur.

Et je souhaiterai juste executer ce script sans avoir à recharger la page, donc la variable $erreur se remplirai au post du form et s'afficherai mais sans aucun rechargement.

Pourrais tru me dire comment faire ?

**Ernestine** · 29 Janvier 2013

1/ Tu interceptes la soumission du formulaire

2/ Au moment de cette soumission tu lances une requête ajax sur ton script php qui gère les erreurs

3/ Tu modifies ce script pour qu'il retourne non pas le tableau brut $erreur, mais un objet json de ce tableau (json_encode($erreur)) (et éventuellement un tableau $succes)

4/ Tu traites le json retourné pour afficher les erreurs dans le formulaire.

J'avais écrit autrefois un petit article qui à mon avis pourrait t'aider : http://www.webmaster-hub.com/publication/Ajax-avec-jQuery-et-JSON.html

Ce serait peut-être bien de faire une autre version de cet article, axée cette fois-ci sur les messages d'erreur / succès.

Hugo38 · 29 Janvier 2013

Voici mes codes, j'ai commencé à essayer d'adapter ton code Ernestine mais je n'y arrive pas pour le moment.

Mon formulaire



 <div id="inscription" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

            <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>

              <h3 id="myModalLabel">Inscrivez vous</h3>

            </div>


            <div class="modal-body">

              <form id="monForm" class="form-horizontal" action="inscription.php" method="post">


                <?php

                  if($erreur2 != ''){

                    echo'<div class="alert alert-error">

                      <button type="button" class="close" data-dismiss="alert">×</button>

                      '.$erreur2.'

                    </div>';

                  }

                ?>

                <div class="control-group">

                  <label class="control-label" for="inputEmail">Adresse E-mail</label>

                  <div class="controls">

                    <input type="text" id="login" placeholder="Email" name="login">

                  </div>

                </div>


                <div class="control-group">

                  <label class="control-label" for="inputPassword">Mot de passe</label>

                <div class="controls">

                    <input type="password" id="password" placeholder="Mot de passe" name="password">

                </div>

                </div>


                <div class="control-group">

                  <label class="control-label" for="inputEmail">Nom et Prénom</label>

                  <div class="controls">

                    <input type="text" id="inputEmail" placeholder="Nom et Prénom" name="nom">

                  </div>

                </div>


                <div class="control-group">

                  <label class="control-label" for="inputEmail">Société</label>

                  <div class="controls">

                    <input type="text" id="inputEmail" placeholder="Société" name="societe">

                  </div>

                </div>


                <div class="control-group">

                  <label class="control-label" for="inputEmail">Adresse postale</label>

                  <div class="controls">

                    <input type="text" id="inputEmail" placeholder="Adresse postale" name="adresse">

                  </div>

                </div>


                <div class="control-group">

                  <label class="control-label" for="inputEmail">Code postal</label>

                  <div class="controls">

                    <input type="text" id="inputEmail" placeholder="Code postal" name="cp">

                  </div>

                </div>


                <div class="control-group">

                  <label class="control-label" for="inputEmail">Ville</label>

                  <div class="controls">

                    <input type="text" id="inputEmail" placeholder="Ville" name="ville">

                  </div>

                </div>


                <div class="control-group">

                  <label class="control-label" for="inputEmail">Téléphone</label>

                  <div class="controls">

                    <input type="text" id="inputEmail" placeholder="Téléphone" name="tel">

                  </div>

                </div>



            </div>


            <div class="modal-footer">

              <button class="btn" data-dismiss="modal">Fermer</button>

              <button class="btn btn-warning" name="inscription">Inscription</button>

            </div>

          </div>


          </form>

Le traitement du formulaire :




 <?php


 include('fonctions/connexion.php');

$erreur2 = '';

  if(isset($_POST['inscription'])){


    $login = mysql_real_escape_string($_POST['login']);

      if(empty($login)){ $erreur2 .= 'Le champ "E-Mail" est obligatoire pour vous inscrire<br/>';

                        $erreur3 = json_encode($erreur2);


      }

    $password = mysql_real_escape_string(md5($_POST['password']));

      if(empty($password)) $erreur2 .= 'Le champ "Mot de passe" est obligatoire pour vous inscrire<br/>';

    $nom = mysql_real_escape_string($_POST['nom']);

      if(empty($nom)) $erreur2 .= 'Le champ "Nom" est obligatoire pour vous inscrire<br/>';

    $societe = mysql_real_escape_string($_POST['societe']);

      if(empty($societe)) $erreur2 .= 'Le champ "Societe" est obligatoire pour vous inscrire<br/>';

    $adresse = mysql_real_escape_string($_POST['adresse']);

      if(empty($adresse)) $erreur2 .= 'Le champ "Adresse" est obligatoire pour vous inscrire<br/>';

    $cp = mysql_real_escape_string($_POST['cp']);

      if(empty($cp)) $erreur2 .= 'Le champ "Code postal" est obligatoire pour vous inscrire<br/>';

    $ville = mysql_real_escape_string($_POST['ville']);

      if(empty($ville)) $erreur2 .= 'Le champ "Ville" est obligatoire pour vous inscrire<br/>';

    $tel = mysql_real_escape_string($_POST['tel']);



    $req_verif = $connexion->prepare("SELECT utilisateurLogin FROM utilisateurs WHERE utilisateurLogin = :login");

    $req_verif->execute(array('login'=>$login));


    $count = $req_verif->rowCount();


    if($count>0) $erreur2 .= 'Il y à déjà un compte associé à cettre adresse email<br/>';


    $req_verif2 = $connexion->prepare("SELECT utilisateurSociete FROM utilisateurs WHERE utilisateurSociete = :societe");

    $req_verif2->execute(array('societe'=>$societe));


    $count2 = $req_verif2->rowCount();


    if($count2>0) $erreur2 .= 'Il y à déjà un compte associé à cette société<br/>';



    if(empty($erreur2)){

      $req = $connexion->prepare("INSERT INTO utilisateurs (utilisateurLogin, utilisateurPass, utilisateurNom, utilisateurSociete, utilisateurAdresse, utilisateurCp, utilisateurVille, utilisateurTel, utilisateurInscription) VALUES ('$login', '$password', '$nom', '$societe', '$adresse', $cp, '$ville', $tel, '".date('Y-m-d')."')");

      $req->execute();


      mkdir('utilisateurs/'.$societe.'');


    }

  }


  ?>

Et le script js :



<script src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript"> 


  $(document).ready(function() {

  $("form#monForm").submit(function() {

    $.getJSON("inscription.php",

    {"action" : "inscription",

    "login" : $("input#login").val(),


    function(data) {

      $("input#login").val(data['erreur3']);


    }

    );

    return false;

  });

});




</script>

Voila donc on voit l'affichage de l'erreur dans la condition php au début du code du formulaire et le but est de l'afficher sans recharger la page.

Pour le moment j'essaye avec juste une erreur ( celle du login ) et quand ça fonctionnera je rajouterai le json encode à toutes les erreurs.

Merci par avance.

**Ernestine** · 29 Janvier 2013

Dans la page de ton formulaire, il faut qu'il y ait une div vide, prête à l'emploi pour l'affichage des erreurs. Par exemple juste avant le formulaire :

<div id="errors"></div>

Quand tu récupères les erreurs avec ajax, tu n'as plus qu'à les y insérer dans ce div :

 function(data) {$("#errors").text(data['erreur3']);}

Bon, si tu veux faire ça correctement, prépare-toi à y passer un moment. L'idéal, c'est que côté php, toutes les erreurs soient réunies en un seul tableau, puis renvoyer ce tableau encodé en json. Ensuite, côté javascript, l'idéal est d'avoir une fonction afficherErrors() qui va prendre ce tableau d'erreurs et le transformer en liste ul/li qui va être affiché dans à l'endroit prévu pour les erreurs. Idem pour les messages de succès.
Il est également préférable que cette liste d'erreurs se vide chaque fois que le formulaire est soumis de nouveau, et éventuellement prévoir une petite image indiquant que le traitement est en cours, etc...
Par ailleurs, pour la majorité des champs, inutile de faire des requêtes Ajax. Pas la peine de faire une requête ajax pour savoir si une adresse email est valide (par exemple), puisque ceci peut se faire en javascript. A ce titre, le plugin de validation peut t'aider : http://bassistance.de/jquery-plugins/jquery-plugin-validation/

Voila, on ne peut pas faire le code à ta place, faut juste que tu comprennes bien le principe et ça ira tout seul.

**captain_torche** · 29 Janvier 2013

De plus, ne pas oublier de faire fonctionner les mêmes traitements SANS JS, et donc ajax.

Connexion

Script php avec AJAX

Sujets conseillés

Hugo38

Lien vers le commentaire

Partager sur d’autres sites

captain_torche

Lien vers le commentaire

Partager sur d’autres sites

Hugo38

Lien vers le commentaire

Partager sur d’autres sites

Ernestine

Lien vers le commentaire

Partager sur d’autres sites

Hugo38

Lien vers le commentaire

Partager sur d’autres sites

Ernestine

Lien vers le commentaire

Partager sur d’autres sites

captain_torche

Lien vers le commentaire

Partager sur d’autres sites

Veuillez vous connecter pour commenter

Parcourir

Activité