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.

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.

Merci pour ta réponse,

Citation:

Envoyé par grunk

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.

Citation:

C'est imposé par le prof.

Et après on se demande pourquoi les néo diplomés comprennent pas ce qu'il font :roll:
Quand on enseigne pas les bases et qu'on va à l'abstraction directement , ca ne peu pas bien se passer

Citation:

Envoyé par grunk

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:

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:

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:

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.
 
}