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

AJAX Discussion :

Faire une requête Ajax


Sujet :

AJAX

  1. #21
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    Citation Envoyé par ASCIIDEFOND
    (NoSmoking corrigera ce code éventuellement )
    ma correction ne portera pas sur le code mais sur l'approche, dans ton code à chaque clic tu refais ta requête ce qui est parfaitement inutile d'autant qu'aucun paramètre ne change.
    La requête, tel quelle ne pèse pas lourd, 345kB, mais cela reste inutile.

    Donc on lit une fois et on filtre ensuite suivant les critères des différents <select>.

  2. #22
    Membre à l'essai
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Janvier 2021
    Messages : 29
    Points : 10
    Points
    10
    Par défaut Suite
    Bonjour à tous, j'espère que vous allez bien.

    J'ai le devoir à rendre dans une semaine, quelqu'un du forum m'a aidé pour pouvoir afficher les résultats dans la console, j'ai compris le fonctionnement, mais il me manque la partie pour pouvoir afficher les résultats dans la page web, dans un tableau.
    Pouvez-vous me donner des pistes s'il vous plait en fonction du code déjà fait, je débute en JS, je sais que je vous sollicite beaucoup … J'aimerais bien le réussir de moi même mais ça fait plusieurs jours que je suis dessus et je dois rendre le projet bientôt.

    Voici le code html fait moi-même :
    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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    <!-- formulaire html -->
        <form id="monForm">
            <!-- champ caché -->
            <input type='hidden' name="type_dossier" value="Permis de construire">
     
            <div class="form-group">
                <label>Adresse</label>
                <input type="text" name="adresse" placeholder="Veuillez indiquer l'adresse">
            </div>
     
             <div class="form-group">
     
            <label>Arrondissement</label>
            <select name="commune">
                 <option value="" selected>Aucun</option>
            </select>
            <script type="text/javascript">
                var select = '';
    for (i=1;i<=20;i++){
        select += '<option val=' + i + '>' + i + '</option>';
    }
    $('#commune').html(select);
            </script>
     
            </div>
     
               <div class="form-group">
                <label>Circonscription</label>
                <select name="circonscription">
                    <option value="" selected>Aucune</option>
                    <option value="NORD">Nord</option>
                    <option value="EST">Est</option>
                    <option value="SUD">Sud</option>
                    <option value="OUEST">Ouest</option>
                </select>
            </div>
     
            <div class="form-group">
                <label>Type de décission</label>
                <select name="type_decision">
                    <option value="" selected>Aucune</option>
                    <option value="Favorable">Favorable</option>
                    <option value="FavorableRéservé">FavorableRéservé</option>
                    <option value="Défavorable">Défavorable</option>
                </select>
            </div>
     
            <div class="form-group">
                <label>État de l'instruction</label>
                <select name="etat">
                    <option value="" selected>Aucune</option>
                    <option value="Accordé">Accordé</option>
                    <option value="En cours d'instruction">En cours d'instruction</option>
                    <option value="Refusé">Refusé</option>
                </select>
            </div>
     
     
     
            <div class="form-group">
                <input type="submit" value="rechercher">
            </div>
        </form>
     
    <!-- tableau html-->
        <div id="mytable">
            <table>
                <tr>
                    <th>Type de dossier</th>
                    <th>Adresse</th>
                    <th>Arrondissement</th>
                    <th>Circonscription</th>
                    <th>Type de décision</th>
                    <th>Etat de l'instruction</th>   
     
                </tr>
     
                 <tr>
                <td id="typeDossier" >Permis de construire</td>
     
                <td id="adresse" ></script></td>
                <td id="arrondissement" ></td>
                <td id="circonscription" ></td>
                <td id="typeDecision" ></td>
                <td id="etat" ></td>
     
     
            </tr>
     
     
     
            </table>
        </div>

    Et le code qui permet d'afficher les résultats de l'API dans la console :

    Code JS : 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
    63
    <!-- affichage des résultats dans la console -->
     
    <script>
    $(function(){
     
        // recherche le select arrondissement
        var $arrondissement = $("#monForm").find('select[name="commune"]').first();
     
        // remplir avec paris 1 -> 20
        for(let cpt = 1; cpt <= 20; cpt++){
            $arrondissement.append(new Option(`Paris ${cpt}`, cpt));
        }
     
        $("#monForm").on('submit', function(e){
            // disable default submit
            e.preventDefault();
     
            // serialiser en tableau mon formulaire
            const dataForm = $(this).serializeArray();
            console.log('mon tableau', dataForm);
     
            // crée une chaine de characteres (string)
     
            const listOfStrings = dataForm.map(element => {
                // Si pas de valeur
                if(element.value == '') return '';
                // si c'est un chiffre (number)
                if(!!Number(element.value))
                    return `${element.name}=${element.value}`;
                // si ce nest pas un chiffre (Not A Number)
                else if(isNaN(element.value))
                    return `search(${element.name},'${element.value}')`;
            })
     
            console.log(listOfStrings);
            const listWithoutEmpty = listOfStrings.filter(element => element != '');
     
            console.log(listWithoutEmpty);
     
            const serializfedList = listWithoutEmpty.join(' and ');
     
     
            const urlBase ='https://opendata.paris.fr/api/v2/catalog/datasets/dossiers-recents-durbanisme/records';
            const listOfColumns = ['nom_dossier', 'type_dossier', 'adresse','commune', 'type_decision', 'etat', 'circonscription','programme'].join(',');
            const url = `${urlBase}?select=${listOfColumns}&where=${serializfedList}&limit=100&offset=0&lang=fr&timezone=Europe%2FParis`;
     
     
              console.log(url);
            $.get(url, function(data, status){
                console.log(data);
     
                // generer le tableau;
     
     
     
            });
        })
    });
    </script>
     
     
    </body>
    </html>

    Merci par avance pour votre aide, je commence bien sûr à me former en JS.

  3. #23
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    J'ai le devoir à rendre dans une semaine,...
    sans vouloir être sévère il serait temps de se réveiller

    Pour le reste, ASCIIDEFOND t'a donné une méthode posiisble dans sa réponse du 17/05/2022, 08h58 (à partir de la ligne 29) !

  4. #24
    Membre à l'essai
    Femme Profil pro
    Développeur Web
    Inscrit en
    Janvier 2021
    Messages
    29
    Détails du profil
    Informations personnelles :
    Sexe : Femme
    Localisation : France, Paris (Île de France)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Matériel informatique

    Informations forums :
    Inscription : Janvier 2021
    Messages : 29
    Points : 10
    Points
    10
    Par défaut
    Bonjour, pour etre précise je dois le montrer le 28 septembre lol mais comme je travaille en dehors des cours dans une entreprise alors ça me fait moins de temps.
    La méthode que tu dis es possible avec le code que j'ai montré ?

  5. #25
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    16 933
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 16 933
    Points : 44 084
    Points
    44 084
    Par défaut
    La méthode que tu dis es possible avec le code que j'ai montré ?
    Il te suffit de l'essayer pour l'adopter

Discussions similaires

  1. Faire échouer une requête ajax
    Par arezkikiki1 dans le forum Langage
    Réponses: 1
    Dernier message: 23/08/2016, 21h17
  2. Réponses: 3
    Dernier message: 15/05/2012, 21h28
  3. Réponses: 2
    Dernier message: 18/06/2011, 10h06
  4. [AJAX] faire une requête mysql ajax
    Par affreuxzozo dans le forum AJAX
    Réponses: 1
    Dernier message: 04/05/2009, 14h16
  5. [Requête] Faire une requête imbriquée?
    Par sekiryou dans le forum Requêtes
    Réponses: 2
    Dernier message: 17/01/2004, 23h52

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