Créez une liste déroulante de pays, d'état et de ville avec l'API REST et jQuery

Souvent nous avons rencontré ces trois lettres et plusieurs d’entre nous ne savent pas ce que (API) signifie . C’est pour quoi j’ai décidé d’écrire ce cours dans le quel nous allons apprendre qu’est ce qu'une API et comment et quand utiliser une API. Avec des exemples.

Alors que signifie API ?

API est l’acronyme anglais qui signifie « Application Programming Interface », que l’on traduit en français par interface de programmation d'application.

Et qu’est ce que une API ?

Une API est l’ensemble de méthode, de définitions, de fonction et de protocoles prédéfinit qui facilite la création et l'intégration de logiciels et d'applications.
Une API est un logiciel intermédiaire qui permet à deux applications de communiquer entre eux. Chaque fois que vous utilisez une application comme instagame ou facebook entre autres, que vous envoyez un message instantané ou que vous vérifiez la météo sur votre téléphone, vous utilisez une API.

Faisons plus simple :

Imaginez que vous êtes au restaurant vous avez le menus devant vous ,vous avez fait votre choix, alors il faut envoyer votre commande à la cuisine (le système) pour la préparer et vous la renvoyer , c’est là qu’intervient le serveur (API)

Voici quelques exemples d’API que nous utilisons dans notre vie quotidienne

• Extraits météorologiques.
• Google utilise des API pour afficher les données pertinentes des requêtes de recherche des utilisateurs. ...
• Connexion à l’aide de XYZ. Extrait de la connexion sociale( facebook google …). ...
• Payez avec PayPal. ...
• Réservation de voyage.

Voici un exemple d’API réel.

Vous avez peut-être déjà essayé de réserver en ligne un ticket de voyage.
Tout comme le restaurant, vous avez un formulaire vous permettant de choisir entre plusieurs options, différentes villes, dates de départ et de retour, et plus encore.
Supposons que vous réserviez votre ticket sur le site Web d’une compagnie de voyage.
Vous choisissez :
Une ville et une date de départ
Une ville et une date de retour
Et aussi d’autres variables.

Pour réserver votre ticket, vous interagissez avec le site Web de la compagnie pour accéder à leur base de données et voir si des places sont disponibles à la dates voulue et quels pourraient être les prix.

Mais, que va-t-il se passer si vous n’utilisez pas le site Web de la compagnie, qui vous donne un accès direct à l’information?

Que se passe-t-il si vous utilisez un service de voyage en ligne, qui regroupe des informations provenant d’un certain nombre de bases de données de compagnies différentes?

Dans ce cas, vous allez interagir avec l’API de la compagnie que vous désirez.

L’API est l’interface de ce service de voyage en ligne qui vous permettra d’obtenir des informations de la base de données de la compagnie désirée pour réserver des sièges, choisir les options de bagages, etc.

L’API prend ensuite la réponse de la compagnie aérienne à votre demande et la renvoie directement au service de voyage en ligne, qui vous montre ensuite les informations les plus à jour et les plus pertinentes. l’API prend certaines caractéristiques qui la rendent précieux et utiles:

• • Les API modernes répondent aux normes (généralement HTTP et REST), qui sont très utilisées par les développeurs.
• • Les API sont plus considérées et traités comme des produits et non comme du code. Ils sont conçus pour être consommés par un public spécifique (par exemple, les développeurs mobiles), ils sont documentés.
• • Les API continuellement mises à jour par des versions pour améliorer le rendement, l'efficacité ou la prestation.
• • Comme tout autre logiciel , l’API a son propre cycle de vie. En outre, les API modernes sont bien documentées pour la consommation et la gestion des versions

Crée`r et générer une liste déroulante de pays, d'état et de ville avec l'API REST et jQuery

Nous allons voir un autre exemple d’utilisation des API.
Supposons que vous voulez créer un formulaire où l’utilisateur doit choisir le pays, l’état et la ville comme le montre l'image suivante:

Comment faire pour générer la liste des payées?

Il faut avoir une base de données pour répertorier tous les payées, les états et les villes du monde !!!
C’est un travail énorme n’est ce pas ?

Heureusement, la solution Geodata nous a simplifier le travail grâce à son API REST Geodata .
Cet API va nous permettre de communiquer avec la base de données de Google.
Donc nous allons utiliser cette API dont voici l'URL :
https://geodata.solutions/api/api.php
et voici le code JavaScript qui va extraire les données de la base distante.

Code JavaScript

Ce code est une fonction JavaScript qui utilise AJAX pour effectuer des appels à une API de géolocalisation. Il crée un objet "ajaxCall" avec une méthode "send" qui envoie une requête au serveur avec des paramètres spécifiques. Les autres fonctions dans ce code utilisent cette méthode "send" pour récupérer des informations sur les pays, les états et les villes en fonction des sélections effectuées par l'utilisateur dans des champs de formulaire.

  Copier le code

	
function ajaxCall() {
    this.send = function(data, url, method, success, type) {
        type = type||'json';
        var successRes = function(data) {
            success(data);
        }
        var errorRes = function(e) {
            console.log(e);
        }
        jQuery.ajax({
            url: url,
            type: method,
            data: data,
            success: successRes,
            error: errorRes,
            dataType: type,
            timeout: 60000
        });
    }
}
function locationInfo() {
    var rootUrl = "https://geodata.solutions/api/api.php";
    var addParams = '';
    if(jQuery("#gds_appid").length > 0) {
        addParams += '&appid=' + jQuery("#gds_appid").val();
    }
    if(jQuery("#gds_hash").length > 0) {
        addParams += '&hash=' + jQuery("#gds_hash").val();
    }
    var call = new ajaxCall();
    this.confCity = function(id) {
        var url = rootUrl+'?type=confCity&countryId='+ jQuery('#idPays option:selected').attr('countryId') +'&stateId=' + jQuery('#idEtat option:selected').attr('stateid') + '&cityId=' + id;
        var method = "post";
        var data = {};
        call.send(data, url, method, function(data) {
            if(data){
            }
            else{
            }
        });
    };
    this.getCities = function(id) {
        jQuery(".ville option:gt(0)").remove();
        var stateClasses = jQuery('#idVille').attr('class');
        var cC = stateClasses.split(" ");
        cC.shift();
        var addClasses = '';
        if(cC.length > 0)
        {
            acC = cC.join();
            addClasses = '&addClasses=' + encodeURIComponent(acC);
        }
        var url = rootUrl+'?type=getCities&countryId='+ jQuery('#idPays option:selected').attr('countryId') +'&stateId=' + id + addParams + addClasses;
        var method = "post";
        var data = {};
        jQuery('.ville').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            jQuery('.ville').find("option:eq(0)").html("Sélectionner la ville");
            if(data.tp == 1){
                var listlen = Object.keys(data['result']).length;
                if(listlen > 0)
                {
                    jQuery.each(data['result'], function(key, val) {
                        var option = jQuery('<option>');
                        option.attr('value', val).text(val);
                        jQuery('.ville').append(option);
                    });
                }
                else
                {
                    var usestate = jQuery('#idEtat option:selected').val();
                    var option = jQuery('<option>');
                    option.attr('value', usestate).text(usestate);
                    option.attr('selected', 'selected');
                    jQuery('.ville').append(option);
                }
                jQuery(".ville").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };
    this.getStates = function(id) {
        jQuery(".etat option:gt(0)").remove();
        jQuery(".ville option:gt(0)").remove();
        var stateClasses = jQuery('#idEtat').attr('class');
        var cC = stateClasses.split(" ");
        cC.shift();
        var addClasses = '';
        if(cC.length > 0)
        {
            acC = cC.join();
            addClasses = '&addClasses=' + encodeURIComponent(acC);
        }
        var url = rootUrl+'?type=getStates&countryId=' + id + addParams  + addClasses;
        var method = "post";
        var data = {};
        jQuery('.etat').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            jQuery('.etat').find("option:eq(0)").html("Sélectionner l'état ou la province");
            if(data.tp == 1){
                jQuery.each(data['result'], function(key, val) {
                    var option = jQuery('<option>');
                    option.attr('value', val).text(val);
                    option.attr('stateid', key);
                    jQuery('.etat').append(option);
                });
                jQuery(".etat").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };
    this.getCountries = function() {
        var countryClasses = jQuery('#idPays').attr('class');
        var cC = countryClasses.split(" ");
        cC.shift();
        var addClasses = '';
        if(cC.length > 0)
        {
            acC = cC.join();
            addClasses = '&addClasses=' + encodeURIComponent(acC);
        }
        var presel = false;
        var iip = 'N';
        jQuery.each(cC, function( index, value ) {
            if (value.match("^presel-")) {
                presel = value.substring(7);
            }
            if(value.match("^presel-byi"))
            {
                var iip = 'Y';
            }
        });
        var url = rootUrl+'?type=getCountries' + addParams + addClasses;
        var method = "post";
        var data = {};
        jQuery('.pays').find("option:eq(0)").html("Please wait..");
        call.send(data, url, method, function(data) {
            jQuery('.pays').find("option:eq(0)").html("Sélectionnez le pays");
            if(data.tp == 1){
                if(presel == 'byip')
                {
                    presel = data['presel'];
                    console.log('2 presel is set as ' + presel);
                }
                if(jQuery.inArray("group-continents",cC) > -1)
                {
                    var $select = jQuery('.pays');
                    console.log(data['result']);
                    jQuery.each(data['result'], function(i, optgroups) {
                        var $optgroup = jQuery("<optgroup>", {label: i});
                        if(optgroups.length > 0)
                        {
                            $optgroup.appendTo($select);
                        }
                        jQuery.each(optgroups, function(groupName, options) {
                            var coption = jQuery('<option>');
                            coption.attr('value', options.name).text(options.name);
                            coption.attr('countryId', options.id);
                            if(presel) {
                                if (presel.toUpperCase() == options.id) {
                                    coption.attr('selected', 'selected');
                                }
                            }
                            coption.appendTo($optgroup);
                        });
                    });
                }
                else
                {
                    jQuery.each(data['result'], function(key, val) {
                        var option = jQuery('<option>');
                        option.attr('value', val).text(val);
                        option.attr('countryId', key);
                        if(presel)
                        {
                            if(presel.toUpperCase() ==  key)
                            {
                                option.attr('selected', 'selected');
                            }
                        }
                        jQuery('.pays').append(option);
                    });
                }
                if(presel)
                {
                    jQuery('.pays').trigger('change');
                }
                jQuery(".pays").prop("disabled",false);
            }
            else{
                alert(data.msg);
            }
        });
    };
}
jQuery(function() {
    var loc = new locationInfo();
    loc.getCountries();
    jQuery(".pays").on("change", function(ev) {
        var countryId = jQuery("option:selected", this).attr('countryId');
        if(countryId != ''){
            loc.getStates(countryId);
        }
        else{
            jQuery(".etat option:gt(0)").remove();
        }
    });
    jQuery(".etat").on("change", function(ev) {
        var stateId = jQuery("option:selected", this).attr('stateid');
        if(stateId != ''){
            loc.getCities(stateId);
        }
        else{
            jQuery(".ville option:gt(0)").remove();
        }
    });
    jQuery(".ville").on("change", function(ev) {
        var cityId = jQuery("option:selected", this).val();
        if(cityId != ''){
            loc.confCity(cityId);
        }
    });
});.

Explication du code JavaScript: Système de sélection de localisation

Ce code JavaScript est une implémentation qui génère un système de sélection de localisation à l'aide d'appels AJAX pour récupérer des données géographiques à partir d'une API tiers. Voici une explication détaillée du fonctionnement du code :

Fonction ajaxCall()

• Cette fonction crée un objet pour effectuer des appels AJAX.
• Elle définit une méthode send qui prend en paramètres les données à envoyer (data), l'URL de destination (url), la méthode HTTP (method), une fonction de succès (success) et le type de données attendu (type).
• Elle utilise jQuery pour effectuer l'appel AJAX avec les paramètres fournis et gérer les réponses.

Fonction locationInfo()

• Cette fonction semble être un gestionnaire pour récupérer des informations géographiques telles que les pays, les états et les villes.
• Elle initialise des variables comme rootUrl qui est l'URL de base de l'API de géolocalisation.
• Elle vérifie si des paramètres supplémentaires sont définis dans le DOM pour l'application (gds_appid et gds_hash).
• Elle crée une instance de ajaxCall() pour effectuer des appels AJAX.

Méthodes de locationInfo()

• confCity(id): Récupère les informations de configuration de la ville en fonction de l'ID de la ville fourni.
• getCities(id): Récupère les villes en fonction de l'ID de l'état fourni.
• getStates(id): Récupère les états ou provinces en fonction de l'ID du pays fourni.
• getCountries(): Récupère la liste des pays.

Gestion des événements

• Lorsque la sélection du pays change ($(".pays").on("change", ...)), elle récupère les états ou provinces associés à ce pays.
• Lorsque la sélection de l'état change ($(".etat").on("change", ...)), elle récupère les villes associées à cet état.
• Lorsque la sélection de la ville change ($(".ville").on("change", ...)), elle effectue une action de configuration spécifique à la ville.

En résumé, ce code utilise des appels AJAX pour récupérer des données géographiques à partir d'une API tierce en fonction des sélections de l'utilisateur dans des menus déroulants (pays, états, villes) et effectue des actions en réponse à ces sélections.

Code HTML

Et voici le code HTML à insérer dans votre page web :

  Copier le code

	
<!doctype html>;
<html lang="fr">;<head>;
    <title>;Comment faire une liste déroulante de pays, d'état et de ville avec l'API REST et jQuery | oujood.com</title>;
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />;  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">;</script>;  
  <script src="js/countrystatecity.js">;</script>;
</head>;
<body>;<div>;
   <h2>;Comment créer une liste déroulante de pays, d'état et de ville avec l'API REST et jQuery </h2>;
<form action="" method="post">;  
  <div>;
        <h3>;Pays</h3>;
        <select name="Pays" class="pays " id="idPays">;
      <option value="">;Sélectionnez le pays</option>;
  </select>;
        <h3>;État</h3>;
        <select name="etat" class="etat " id="idEtat">;
      <option value="">;Sélectionner l'état</option>;
  </select>;
        <h3>;Ville</h3>;        
        <select name="ville" class="ville " id="idVille">;
      <option value="">;Sélectionner la ville</option>;
  </select>;
  </div>;
</form>;
</div>;
  </body>;
</html>;

Et comme vous le constater nous avons mis le code javascript précédent dans un fichier ( countrystatecity.js ) lequel est mis dans le dossier (js), puis nous avons inséré ce fichier dans la partie head de notre page comme suit :

<script src="js/countrystatecity.js">;</script>;

Et bien vous devez aussi insérer le script jquery et toujours dans la partie head de votre page comme suit :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">;</script>;

Ce formulaire présente 3 entrées sous forme de listes déroulantes pour saisir Pays, État et Ville, vous devez d'abord sélectionner le pays, et l’API extraira les États pour ce pays, puis sélectionnez un États et l’API extraira les noms de villes pour vous et ainsi vous pouvez sélectionner une ville.
Vous pouvez récupérer les données saisies et en faire ce que vous voulez.