Partager

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

Utiliser l' API REST de la solution Geodata pour obtenir des données et c'est un plugin très simple et facile à utiliser, ajoutez simplement du HTML dans votre projet existant et profitez-en
Créez une liste déroulante de pays, d'état et de ville avec l'API REST de la solution Geodata et jQuery

Qu’est qu’une API

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 que une API et comment et quand utiliser une API . Avec des exemples.

Alors qu’est ce que 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, 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éez 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.

Comment faire ?

Il faut avoir une base de données pour répertorier tous les payée, 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 l4URL :
https://geodata.solutions/api/api.php
et voici le code java script qui va extraire les données de la base distante.

Code java script
Sélectionner 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('", {label: i});
                        if(optgroups.length > 0)
                        {
                            $optgroup.appendTo($select);
                        }
                        jQuery.each(optgroups, function(groupName, options) {
                            var coption = jQuery('
 

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

Code HTML
Sélectionner 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 java script 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 prtie 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 ville 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.


Retour à l'accueil du site

Par carabde 26 aout 2021

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting
Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1 HTML5, CSS3, JavaScript pour débutants Tome 1
Premier tome d\'une série vidéo dédiée à l\'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise option

Définit une option dans une liste déroulante

Liste de balies HTML

La liste des balises HTML que nous espérons qu’elle vous sert comme aide mémoire...

la fonction explode, explode

Coupe une chaîne en segments