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

Bibliothèques et frameworks PHP Discussion :

Tuto utilisation PHP avec jQuery(ajax) échange de données entre ces deux langages


Sujet :

Bibliothèques et frameworks PHP

  1. #1
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2017
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2017
    Messages : 176
    Par défaut Tuto utilisation PHP avec jQuery(ajax) échange de données entre ces deux langages
    Bonjour,

    Je fais un un petit travail pour apprendre à utiliser Composer.
    Je dois créer un formulaire dans lequel l'utilisateur va rentrer un code IBAN.
    Je traite ce formulaire en PHP, avec globalcitizen/php-iban de packagist.

    Je voudrai bien faire apparaître les messages d'erreurs ou un message si tout s'est bien passer en Ajax.

    j'ai déjà fais un autre travail, ou j'utilisais PHP et ajax, mais en suivant des vidéos… et je n'ai pas spécialement tout compris.

    Pour ne pas refaire deux fois la même erreur, j'ai cherché après des tutos ou cours qui explique clairement comment se passe l'échange de données entre les deux langages, mais sans résultat.

    Peut être qu'un Dev Fullstack pourrait m'éclairer ou m'orienté vers une cours qui traites sur l'utilisation des deux langages.

  2. #2
    Modérateur
    Avatar de grunk
    Homme Profil pro
    Lead dév - Architecte
    Inscrit en
    Août 2003
    Messages
    6 693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Lead dév - Architecte
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2003
    Messages : 6 693
    Par défaut
    La première chose à comprendre c'est que tu n'as pas besoin de Jquery pour ça. Certes ca facilite un peu là chose mais c'est dommage d'inclure une lib juste pour ça.

    Un tuto un peu ancien mais qui se limite aux base de la communication : https://gael-donat.developpez.com/web/intro-ajax/ . Tu peux faire abstraction de toutes les parties faisant référence à ActiveXObject qui n'a plus lieu d'être aujourd'hui.
    Pry Framework php5 | N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  3. #3
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2017
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2017
    Messages : 176
    Par défaut
    Merci pour ta réponse,

    Citation Envoyé par grunk Voir le message
    La première chose à comprendre c'est que tu n'as pas besoin de Jquery pour ça. Certes ca facilite un peu là chose mais c'est dommage d'inclure une lib juste pour ça.
    C'est imposé par le prof.

    Et merci pour ton lien, entre temps, je l'avais trouvé ici aussi et celui-ci.
    https://dmouronval.developpez.com/tu...-requete-ajax/

    Je lis tout ça et je reviens si j'ai des questions.

  4. #4
    Modérateur
    Avatar de grunk
    Homme Profil pro
    Lead dév - Architecte
    Inscrit en
    Août 2003
    Messages
    6 693
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 41
    Localisation : France, Côte d'Or (Bourgogne)

    Informations professionnelles :
    Activité : Lead dév - Architecte
    Secteur : Industrie

    Informations forums :
    Inscription : Août 2003
    Messages : 6 693
    Par défaut
    C'est imposé par le prof.
    Et après on se demande pourquoi les néo diplomés comprennent pas ce qu'il font
    Quand on enseigne pas les bases et qu'on va à l'abstraction directement , ca ne peu pas bien se passer
    Pry Framework php5 | N'oubliez pas de consulter les FAQ Java et les cours et tutoriels Java

  5. #5
    Membre confirmé
    Homme Profil pro
    Étudiant
    Inscrit en
    Septembre 2017
    Messages
    176
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : Septembre 2017
    Messages : 176
    Par défaut
    Citation Envoyé par grunk Voir le message
    Et après on se demande pourquoi les néo diplomés comprennent pas ce qu'il font
    Tout à fait d'accord avec toi, si on ne comprend pas ce qu'on fait, ça n'ira jamais.

    Lecture et mise en pratique interaction PHP et ajax check.

    Voilà ce que j'ai fait.

    Je rentre un code IBAN et je teste sa validité.

    index.php
    Code html : 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
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!---rend responsive bootstrap-->
        <meta charset="UTF-8">
        <title>Iban Validator</title>
        <!--feuille de style propre à Bootstrap, doit venir avant mes propores feuilles de style-->
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
        <link rel="stylesheet" href="css/style.css" type="text/css">
    </head>
    <body>
        <!--div pour les message renvoyé par le server-->
        <div id="errormessage" class="alert alert-danger">
     
        </div></div>
        <div id="successmessage" class="alert alert-success"></div>
     
        <div class="container">
            <h2>IBAN Validator</h2>
            <div class="card text-white bg-secondary mb-3">
                <form method="POST" action="traitement.php" id="formiban">
                    <div class="form-group">
                        <label for="iban">Entrez votre code IBAN</label>
                        <input name="iban" type="text" class="form-control" placeholder="votre IBAN">
                    </div>
                    <div class="col text-center">
                        <input type="submit" name="submit" value="Submit" class="btn btn-primary">
                    </div>
                 </form>
            </div>
        </div>
     
        <!--à placer avant la balise fermante body-->
        <!--cdn JQuery, indispensable pour l'utilisation de Bootstrap-->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
        <!--cdn popper, indispensable pour la dernière version de Bootstrap-->
        <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
        <!--plugin js de Bootstrap-->
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
        <script  src="script.js"></script>
    </body>
    </html>

    script.js
    Code JavaScript : 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
    "use strict";
     
    $(document).ready(function(){
        //au clic sur le boutton submit, envoi des données du formulaire vers le server et récupère les messages renvoyé par le server.
        $('#formiban').on('submit', function(e){
            e.preventDefault();//evite le comportement par defaut, l'envoi du formulaire.
     
            //cache les messages d'alert précédent lors de l'envoi du formulaire et je met un text vide
            $('.alert').text('').hide().stop();//stop annule l'annimation et un comportement bizzare si je clic plusieurs fois sur le boutton.
     
            var url = $(this).attr('action');//renvoi vers le fichier qui est dans le action du formulaire
            var method = $(this).attr('method');//même chose pour la method du formulaire
            var data = $(this).serialize();//je récupère les données du formulaire grace à serialize, elles seront déjà formatée
            //console.log(data);
     
            $.ajax({
                url: url,
                type: method,
                data: data,//données envoyées au server
                dataType: 'json',//type de donnée en retour du server
                success: function(response){//en cas de succès, je prends la réponse du server
                    console.log(response);
                    if(response.success){
                        //affiche avec un slide vers le bas, la div avec le message de succès avec un délais de 2 sec
                        $('#successmessage').text(response.success).slideDown().delay(3000).slideUp();
                        $('form').get(0).reset();//réinitialise le formulaire.
                    }
                    if(response.errors){
                        var errorString = '';//je stock les erreurs dans une variable
                        //je boucle dans le tableau d'erreur renvoyé par le server
                        $.each(response.errors, function(key, value){
                            errorString += '<p>'+value+'</p>';//et je mets les erreur dans ma variable
                        });
                        //affiche avec un slide vers le bas, la div avec les messages d'erreurs avec un délais de 2 sec
                        $('#errormessage').html(errorString).slideDown().delay(3000).slideUp();
                        //.html à la différence de .text va interpreter les balise <p> ci-dessus
                    }
                },
                error: function(message) {//en cas d'erreur renvoyée par le server, hors erreur dans les champs du formulaire, ex: erreur de syntax
                    console.log(message);
                }
            });
        });
    });

    traitement.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
    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
    <?php
    namespace iban;
    require_once __DIR__ . '/vendor/autoload.php';
    use IBAN;
     
    if(!empty($_POST))
    {
        //extract($_POST);//extrait les données du POST et permet de les pouvoir appeler les variables contenuent dans le POST $variable
        $iban = $_POST['iban'];
        $myIban = new IBAN($iban);
     
        $errors = [];//Tableau qui contiendra les erreurs s'il y en a.
     
        //si le champs IBAN est vide, je mets le message d'erreur dans le tableau des erreurs
        if(empty($iban)){
            array_push($errors, 'Vous devez rentrer votre IBAN!');
        }
     
        //Vérifiez un numéro IBAN. Tolère les espaces, les préfixes "IBAN ...", les tirets, les entrées en minuscules, etc.
        if(!$myIban->Verify()) {
            array_push($errors, 'IBAN invalide! Mauvais format!');
     
        }
     
        //Vérifier la somme de contrôle d'un IBAN - code modifié à partir de la classe Validate_Finance PEAR
        if(!$myIban->VerifyChecksum()) {
            array_push($errors, 'IBAN invalide! Erreur checksum!');
        }
     
        //vérifie le nombre de caractères et suggère le bon nombre de caractères pour ce pays
        $machine_iban = $myIban->MachineFormat();
        $country = iban_get_country_part($machine_iban);
        $observed_length = strlen($machine_iban);
        $expected_length = iban_country_get_iban_length($country);
        if ($observed_length != $expected_length) {
            array_push($errors, 'longueur '.$observed_length.' caractères ne correspond pas à la longueur attendue '.$expected_length.' caractères, pour le pays '.$country.'.');
        }
     
        //vérifie l'expression régulière et suggère le bon format.
        $regex = '/' . iban_country_get_iban_format_regex($country) . '/';
        if (!preg_match($regex, $machine_iban)) {
            array_push($errors, 'ne correspond pas à l\'expression régulière'.$regex.'pour le pays '.$country.'.');
        }
     
        /*$suggestions = $myIban->MistranscriptionSuggestions();
        if(count($suggestions)==1) {
            array_push($errors, 'You really meant ' . $suggestions[0] . ', right?');
        }*/
     
     
        //s'il y a des erreurs, je les stock dans une variable $response qui sera envoyée au navigateur
        if(count($errors)){
            $response = ['errors'=>$errors];
            echo json_encode($response);//j'encode la réponse au format JSON
            exit;
        }
     
        $response = ['success'=>'IBAN valide'];//S'il n'y a pas d'erreur
     
        echo json_encode($response);exit;//j'encode la réponse au format JSON avant de l'envoyée au navigateur.
     
    }

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. les <select> avec jQuery ajax
    Par nigella dans le forum jQuery
    Réponses: 4
    Dernier message: 19/12/2011, 16h21
  2. [1.x] proctection csrf avec jquery ajax
    Par Susanno dans le forum Symfony
    Réponses: 2
    Dernier message: 13/08/2011, 22h09
  3. Appel Ajax avec jQuery : $.ajax is not a function
    Par Grulf dans le forum jQuery
    Réponses: 2
    Dernier message: 18/02/2011, 11h47
  4. utilisation asyncrone avec jQuery
    Par bucheron007 dans le forum APIs Google
    Réponses: 1
    Dernier message: 29/04/2009, 00h04
  5. [JQUERY] Comment appeler une fonction php avec jquery
    Par popogendarme dans le forum jQuery
    Réponses: 1
    Dernier message: 20/03/2007, 16h07

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