Faire une requête Ajax

**chaaa.info** · 04/05/2022, 16h38

Bonjour,

Je dois faire un formulaire de recherche avec plusieurs champs. Je dois récupérer les données depuis le site https://opendata.paris.fr/explore/da...&sort=-commune

Pour cela je dois faire une requête Ajax, sauf que je n'ai jamais utilisé Ajax et c'est justement un projet pour apprendre.

Voici une capture du formulaire simple en HTML :

Nom : vueformulaire.PNG
Affichages : 348
Taille : 38,3 Ko

Nom : vueformulaire.PNG
Affichages : 348
Taille : 38,3 Ko

J'aimerais recevoir des conseils et des pistes,

Merci par avance

**Philcmoi** · 04/05/2022, 16h53

Quel langage utilises tu ?
Php ou Java ?
Saits tu utiliser Jquery ?

**chaaa.info** · 04/05/2022, 17h35

Pour l'instant je n'ai fait que le code HTML qui s'appelle "vueformulaire.html", et j'ai fait un autre fichier pour traiter le formulaire "resultat.php", mais je n'ai pas encore écrit de code.

Non, je ne sais pas utiliser JQuery

**Sparky95** · 04/05/2022, 22h14

Bonjour,

Je penses que le plus simple est que tu commences pas te documenter un peu ;-) https://ajax.developpez.com/cours/
Histoire également de comprendre un peu ce qu'est l'Ajax et comment cela fonctionnes.
Après si tu galère encore YouTube est ton poto

.

Pour résumer, ton Ajax devras obligatoirement être fait en JavaScript ou l'un de ses dérivés (TypeScript ou jQuery).
Étant débutante, je te conseil de directement de passer à du jQuery (c'est pas top car tu n'apprends pas le Js mais tu avancera beaucoup plus vite)

Perso j'ai commencé avec le jQuery, je n'ai jamais vraiment appris le JS, car je le trouvais trop lourd et j'ai pas mal suivi de tuto via YouTube.

Aujourd'hui je suis en entreprise on fait du TypeScript qui est assez puissant mais question plaisir, je garde une préférence pour le jQuery.

Donc le plus simple pour débuter.

- Revois bien comment faire transiter les données formulaires de l'HTML vers le PHP (Comment récupérer la valeur de l'input en PHP) => mettre 2 formulaires différents dans la même page HTML et récupérer dans le même fichier PHP les donnés du 1er ou du 2e formulaire

- Voir comment intégrer la Librairie jQuery dans ta page HTML.(indice <script src=""></script>)

- Voir comment faire appel au JavaScript (les balises <script></script> ou => passer par un fichier JS ce que je te recommandes plus)

- Voir comment faire appel aux données de ton formulaire via jQuery (faire appel à tes inputs + comprendre comment détecter un Évènement de type click ou envoie de formulaire)

- Comprendre ce qu'est un évènement

- Voir comment détecter et bloquer l'envoie par HTML pour le faire transiter par jQuery à l'aide de l'ajax.

Voila quelques points que je te recommanderai de creuser histoire de pouvoir avancer pas mal dans ton exercice.

Un truc qui m'a aussi pas mal aidé au début c'était de regarder le code source de sites web.

Parfois quand j'oubliais la syntaxe d'écrire d'éléments en HTML je regardais le code source de site pour voir comment l'écrire. ex: pour le CSS j'oubliais tout le temps que c'est link rel="stylesheet" type="text/css"...

Voila. N'hésite pas si tu as besoin de plus d'aide / conseilles.

Bonne journée

**chaaa.info** · 05/05/2022, 09h35

Merci beaucoup pour tes conseils, je vais creuser tout ça !

**ASCIIDEFOND** · 05/05/2022, 16h57

Salut à tous,
Comme le soulignait Sparky95, apprendre le JQuery vous facilitera grandement la tâche pour des applications en Javascript et Ajax.
Voici ci-dessous un modeste exemple en Jquery pour votre formulaire de recherche.

Ps : Téléchargez le fichier "dossiers-recents-durbanisme.json" du site "https://opendata.paris.fr/explore/dataset/dossiers-recents-durbanisme/export/"

Nom : Screenshot 2022-05-05 at 16-49-22 Document.png
Affichages : 307
Taille : 108,9 Ko

Nom : Screenshot 2022-05-05 at 16-49-22 Document.png
Affichages : 307
Taille : 108,9 Ko

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<body>
    <style>
        h1 {
            color: #2364CA;
        }
 
        span {
            display: inline-block;
            font-size: 1.1em;
            position: relative;
            line-height: 30px;
        }
 
        select {
            border: 1px solid #009AFE;
            font-size: 1em;
            height: 25px;
            margin-right: 10px;
        }
 
        button {
            height: 28px;
            width: 150px;
            cursor: pointer;
            border: 1px solid #009AFE;
            color: #1787a2;
            font-weight: bold;
            border-radius: 20px;
        }
 
        button::before {
            content: "\01F50D";
        }
 
        #mytable {
            padding: 20px;
        }
 
        table {
            border-collapse: collapse
        }
 
        th {
            border: 1px solid #009AFE;
            padding: 5px;
            width: 150px;
            color: #1781f2;
        }
 
        td {
            border: 1px solid #009AFE;
            padding: 10px;
        }
    </style>
 
    <div>
        <h1>Vérification des permis de contruire à Paris</h1>
        <span>Type de dossier:</span>
        <select name="typededossier" id="select_un">
            <option value="1">Permis de construire</option>
        </select>
        <span>Arrondissement:</span>
        <select name="ardm" id="select_deux"></select>
 
        <script type="text/javascript">
            var x, option, element = document.getElementById("select_deux");
 
            for (x = 1; x < 21; x += 1) {
                option = document.createElement("option");
                option.text = option.value = x;
                element.appendChild(option);
            }
        </script>
 
        </select>
        <span>Type de décision:</span>
        <select name="tdd" id="select_trois">
            <option value="1">Favorable</option>
            <option value="2">FavorableRéservé</option>
            <option value="3">Défavorable</option>
        </select>
        <span>Etat de l'instruction:</span>
        <select name="edi" id="select_quatre">
            <option value="1">Accordé</option>
            <option value="2">En cours d'instruction</option>
            <option value="3">Refusé</option>
        </select>
        <span>Circonscription:</span>
        <select name="ccsp" id="select_cinq">
            <option value="1">NORD</option>
            <option value="2">EST</option>
            <option value="2">SUD</option>
            <option value="2">OUEST</option>
        </select>
 
        <button id="rechecher"> Rechercher</button>
    </div>
 
    <div id="mytable">
        <table>
            <tr>
                <th>Type de dossier</th>
                <th>Arrondissement</th>
                <th>Type de décision</th>
                <th>Etat de l'instruction</th>
                <th>Circonscription</th>
                <th>Record Id</th>
            </tr>
 
        </table>
    </div>
 
    <script src="js/script.js"></script>
</body>

Code JQuery :

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
function litfichier(A, B, C, D, E) {
  var x, V, Kkey, ligne = '', Vid; 
 
  $('.data').remove(); //RAZ tableau
 
  $.ajax({
    url: "./dossiers-recents-durbanisme.json",
    type: "GET",
    dataType: "json",
    error: function () {
      console.log('Error!')
    },
    success: function (data) {
      for (x = 0; x < (data.length); x += 1) {
        Kkey = Object.keys(data[x]);
 
        if (Kkey[1] === "recordid") {
          Vid = Object.values(data[x]);
        }
 
        if (Kkey[2] === "fields") {
          V = Object.values(data[x]);
 
          if (V[2]['type_decision'] === undefined) {
            V[2]['type_decision'] = '';
          } 
 
          if (V[2]['type_dossier'] === A && V[2]['commune'] === parseInt(B) && (V[2]['type_decision'] === C || V[2]['type_decision'] === '') && V[2]['etat'] === D && V[2]['circonscription'] === E) {
            ligne += `<tr class="data"><td> ${V[2]['type_dossier']}</td>` +
              `<td> ${V[2]['commune']}</td>` +
              `<td> ${V[2]['type_decision']}</td>` +
              `<td> ${V[2]['etat']}</td>` +
              `<td> ${V[2]['circonscription']}</td>` +
              `<td> ${Vid[1]} </td></tr>`;
          }
        }
      }
      $('table').append(ligne); // On affiche les résultats dans le tableau
    }
    });
}
 
$(function () {
    (function ($) {
 
      $('#rechecher').on('click', function () {
        var optionsselect = [];// Les valeurs des selects dans un array
 
        /*
        type_dossier --> Permis de construire
        type_decision -->  Favorable FavorableRéservé Défavorable
        circonscription --> NORD EST SUD OUEST
        commune --> n° de l'arrondissement
        etat --> En cours d'instruction Accordé Refusé
        */
 
        optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
        optionsselect[1] = $('#select_deux option:selected').text(); // commune
        optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
        optionsselect[3] = $('#select_quatre option:selected').text(); // etat
        optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
        litfichier(optionsselect[0], optionsselect[1], optionsselect[2], optionsselect[3], optionsselect[4]); // En Ajax
      });
    })(jQuery);
});

**chaaa.info** · 05/05/2022, 17h21

Merci beaucoup, j'étudie tout ça et je reviens vers vous en cas de problèmes

**Dave Hiock** · 05/05/2022, 17h40

\ô/

Envoyé par ASCIIDEFOND

Ps : Téléchargez le fichier "dossiers-recents-durbanisme.json"

pourquoi ne pas interroger directement l'API qui donne la garantie de données à jour ?

Envoyé par ASCIIDEFOND

apprendre le JQuery vous facilitera grandement la tâche pour des applications en Javascript et Ajax.

apprendre jQuery sans connaître JavaScript c'est , à mon sens, prendre le problème à l'envers et se retrouver rapidement devant des incompréhension voir du code spaghetti

Pour l'utilisation de l'Ajax, il existe par exemple l'API fetch, qui est plus simple d'utilisation qu'il n'y paraît.

Concernant le code

litfichier(optionsselect[0], optionsselect[1], optionsselect[2], optionsselect[3], optionsselect[4]); // En Ajax

peu-être plus simple de passer simplement l'array

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 litfichier(optionsselect); // En Ajax

...

**chaaa.info** · 05/05/2022, 21h10

Envoyé par Dave Hiock

\ô/

pourquoi ne pas interroger directement l'API qui donne la garantie de données à jour ?

Qu'elle est la procédure pour faire cela s'il vous plait ?

**chaaa.info** · 05/05/2022, 21h51

Envoyé par ASCIIDEFOND

Salut à tous,
Comme le soulignait Sparky95, apprendre le JQuery vous facilitera grandement la tâche pour des applications en Javascript et Ajax.
.....

Le problème c'est que je dois afficher ce formulaire sur une page WordPress, ce qu'ai j'ai fait en créant un short code qui permet de l'afficher, et traiter le formulaire avec Ajax. Tu aurais des conseils pour gérer ça dans Wordpress ?

Nom : cap.PNG
Affichages : 299
Taille : 79,6 Ko

Nom : cap.PNG
Affichages : 299
Taille : 79,6 Ko

**ASCIIDEFOND** · 06/05/2022, 09h44

Salut,

Envoyé par chaaa.info

Le problème c'est que je dois afficher ce formulaire sur une page WordPress, ce qu'ai j'ai fait en créant un short code qui permet de l'afficher, et traiter le formulaire avec Ajax. Tu aurais des conseils pour gérer ça dans Wordpress ?

Pour intégrer du code dans Wordpress, désolé mais là je ne pourrais pas te renseigner.
Voir du côté de ces liens peut-être ?

Activer JQuery dans Wordpress
https://wpchannel.com/wordpress/tuto...-slide-toggle/

Ajouter correctement ses scripts jQuery avec WordPress
https://wordpress.bbxdesign.com/astu...avec-wordpress

WordPress et Ajax
https://capitainewp.io/formations/de...ordpress-ajax/

**ASCIIDEFOND** · 06/05/2022, 14h20

Re salut,

Envoyé par chaaa.info

Qu'elle est la procédure pour faire cela s'il vous plait ?

Re salut,
Autre code pour interroger l’API, si cela peut aider ?

Code JQuery :

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
 
function litfichier(otpisel) {
  var x, ligne = '', Field, data, Rec=[];
 
  $('.data').remove(); //RAZ tableau
 
  $.ajax({
    url: "https://opendata.paris.fr/api/records/1.0/search/?dataset=dossiers-recents-durbanisme&q=&rows=5000&sort=-commune&facet=type_dossier&facet=commune&facet=etat&facet=type_decision&facet=circonscription&refine.type_dossier=Permis+de+construire",
    type: "GET",
    dataType: "json",
    error: function () {
      console.log('Error!')
    },
    success: function (Data) {
     data = Data['records'];
 
      for (x = 0; x < data.length; x += 1) {
        Field = data[x]['fields'];
 
        Rec[0] = Field['type_dossier'];
        Rec[1] = Field['type_decision'];
        Rec[2] = Field['libelle'];
        Rec[3] = Field['date_depot'];
        Rec[4] = Field['date_decision'];
        Rec[5] = Field['demandeur'];
        Rec[6] = Field['adresse'];
        Rec[7] = Field['etat'];
        Rec[8] = Field['circonscription'];
        Rec[9] = Field['commune'];
        Rec[10] = Field['nom_dossier'];  
 
 
        if(Rec[0] === otpisel[0] && (Rec[1] === otpisel[2] || Rec[1] === undefined) && Rec[7] === otpisel[3] &&  Rec[9] === parseInt(otpisel[1]) && Rec[8] === otpisel[4] ) {
          ligne += `<tr class="data"><td> ${Rec[0]}</td>` +
            `<td> ${Rec[9]}</td>` +
            `<td> ${Rec[1]}</td>` +
            `<td> ${Rec[7]}</td>` +
            `<td> ${Rec[8]}</td>` +
            `<td> ${Rec[10]} </td></tr>`;
        }
      }
      $('table').append(ligne); // On affiche les résultats dans le tableau
    }
  });
}
 
$(function () {
    (function ($) {
 
      $('#rechecher').on('click', function () {
        var optionsselect = [];// Les valeurs des selects dans un array       
        optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
        optionsselect[1] = $('#select_deux option:selected').text(); // commune
        optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
        optionsselect[3] = $('#select_quatre option:selected').text(); // etat
        optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
        litfichier(optionsselect);
      });
    })(jQuery);
});

**chaaa.info** · 06/05/2022, 16h17

Merci pour ta réponse !

**chaaa.info** · 15/05/2022, 12h24

Bonjour, j'ai testé ton code mais rien ne se passe

**NoSmoking** · 16/05/2022, 12h20

Bonjour,
j'ai du mal à comprendre la démarche engagée, envoi et lecture d'une requête à l'API à chaque demande !!!

La lecture et l’initialisation devrait se faire au départ puis les filtres et affichage demandés lors des changements de valeurs sur les <select>.

La récupération est des plus simple :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// pour storer les datas
let objData = {};
function getDatas(url, callback) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // store les datas pour traitement
      objData = [...data.records];
      // init de select par exemple
      callback  && callback( data);
    });
}
// lancement au chargement
getDatas(URL, initSelect);

initialisation des <select> peut également être dynamique, fonction callback dans le code ci-dessus, mais ce n'est pas une obligation si l'on sait vraiment à quels champs on à affaire.

Sur les changements il suffit d'utiliser la méthode filter() pour récupérer les données correspondantes, et ce sur tous les select filtrants.

Voilà pour les grandes lignes, on ne lit qu'une fois, on peut prévoir un « update » au cas où, et on fait le reste côté client.

Voir : Array.prototype.filter()

**chaaa.info** · 16/05/2022, 12h37

Et donc ça c'est toujours dans le même script. JS ?

**chaaa.info** · 16/05/2022, 16h20

Bonjour, pouvez-vous me dire ce qui ne va pas dans le code s'il vous plaît ?

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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
// pour storer les datas
let objData = {};
function getDatas(url, callback) {
  fetch(url)
    .then((response) => response.json())
    .then((data) => {
      // store les datas pour traitement
      objData = [...data.records];
      // init de select par exemple
      callback  && callback( data);
    });
}
// lancement au chargement
getDatas(URL, initSelect);
 
 
 
 
function litfichier(otpisel) {
  var x, ligne = '', Field, data, Rec=[];
 
  $('.data').remove(); //RAZ tableau
 
  $.ajax({
    url: "https://opendata.paris.fr/api/records/1.0/search/?dataset=dossiers-recents-durbanisme&q=&rows=5000&sort=-commune&facet=type_dossier&facet=commune&facet=etat&facet=type_decision&facet=circonscription&refine.type_dossier=Permis+de+construire",
    type: "GET",
    dataType: "json",
    error: function () {
      console.log('Error!')
    },
    success: function (Data) {
     data = Data['records'];
 
      for (x = 0; x < data.length; x += 1) {
        Field = data[x]['fields'];
 
        Rec[0] = Field['type_dossier'];
        Rec[1] = Field['type_decision'];
        Rec[2] = Field['libelle'];
        Rec[3] = Field['date_depot'];
        Rec[4] = Field['date_decision'];
        Rec[5] = Field['demandeur'];
        Rec[6] = Field['adresse'];
        Rec[7] = Field['etat'];
        Rec[8] = Field['circonscription'];
        Rec[9] = Field['commune'];
        Rec[10] = Field['nom_dossier'];  
 
 
        if(Rec[0] === otpisel[0] && (Rec[1] === otpisel[2] || Rec[1] === undefined) && Rec[7] === otpisel[3] &&  Rec[9] === parseInt(otpisel[1]) && Rec[8] === otpisel[4] ) {
          ligne += `<tr class="data"><td> ${Rec[0]}</td>` +
            `<td> ${Rec[9]}</td>` +
            `<td> ${Rec[1]}</td>` +
            `<td> ${Rec[7]}</td>` +
            `<td> ${Rec[8]}</td>` +
            `<td> ${Rec[10]} </td></tr>`;
        }
      }
      $('table').append(ligne); // On affiche les résultats dans le tableau
    }
  });
}
 
$(function () {
    (function ($) {
 
      $('#rechecher').on('click', function () {
        var optionsselect = [];// Les valeurs des selects dans un array       
        optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
        optionsselect[1] = $('#select_deux option:selected').text(); // commune
        optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
        optionsselect[3] = $('#select_quatre option:selected').text(); // etat
        optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
        litfichier(optionsselect);
      });
    })(jQuery);
});

**NoSmoking** · 16/05/2022, 19h11

J'ai un peu peur de ce que je lis, comprends-tu au moins ce que l'on te fournit ?

Montre nous ton code que l'on voit ta compréhension des enchainements.

**chaaa.info** · 16/05/2022, 19h19

Désolée c'est la première fois que j'utilise Ajax et JQuery je ne m'y connais pas du tout …
Je n'ai fait que le formulaire html et après un des membres de la discussion plus haut a un peut modifier les champs pour faire la liaison avec JavaScript (ex : select_un, select_deux ...)
Et pour le code oui j'ai essayé de comprendre un peu la logique pour pouvoir récupérer les données de l'API

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
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<body>
    <style>
        h1 {
            color: #2364CA;
        }
 
        span {
            display: inline-block;
            font-size: 1.1em;
            position: relative;
            line-height: 30px;
        }
 
        select {
            border: 1px solid #009AFE;
            font-size: 1em;
            height: 25px;
            margin-right: 10px;
        }
 
       
 
        
 
        #mytable {
            padding: 20px;
        }
 
        table {
            border-collapse: collapse
        }
 
        th {
            border: 1px solid #009AFE;
            padding: 5px;
            width: 150px;
            color: #1781f2;
        }
 
        td {
            border: 1px solid #009AFE;
            padding: 10px;
        }
    </style>
 
    <div>
 
        <span>Type de dossier:</span>
        <select name="typededossier" id="select_un">
            <option value="1">Permis de construire</option>
        </select>
 
        <br>
 
        <span>Arrondissement:</span>
        <select name="ardm" id="select_deux"></select>
 
        <script type="text/javascript">
            var x, option, element = document.getElementById("select_deux");
 
            for (x = 1; x < 21; x += 1) {
                option = document.createElement("option");
                option.text = option.value = x;
                element.appendChild(option);
            }
        </script>
 
        <br>
 
        </select>
        <span>Type de décision:</span>
        <select name="tdd" id="select_trois">
            <option value="1">Favorable</option>
            <option value="2">FavorableRéservé</option>
            <option value="3">Défavorable</option>
        </select>
 
        <br>
 
        <span>Etat de l'instruction:</span>
        <select name="edi" id="select_quatre">
            <option value="1">Accordé</option>
            <option value="2">En cours d'instruction</option>
            <option value="3">Refusé</option>
        </select>
 
        <br>
 
        <span>Circonscription:</span>
        <select name="ccsp" id="select_cinq">
            <option value="1">NORD</option>
            <option value="2">EST</option>
            <option value="2">SUD</option>
            <option value="2">OUEST</option>
        </select>
 
        <br>
 
        <button id="rechecher"> Rechercher</button>
 
    </div>
 
    <div id="mytable">
        <table>
            <tr>
                <th>Type de dossier</th>
                <th>Arrondissement</th>
                <th>Type de décision</th>
                <th>Etat de l'instruction</th>
                <th>Circonscription</th>
                <th>Record Id</th>
            </tr>
 
        </table>
    </div>
 
    <script src="js/script.js"></script>
</body>

**ASCIIDEFOND** · 17/05/2022, 08h58

Bonjour à tous,
chaaa.info, voici un exemple avec Fetch. (NoSmoking corrigera ce code éventuellement

)
Ps : Pour JQuery, ne pas oublier d’ajouter la ligne '<script src="https://code.jquery.com/jquery-3.6.0.min.js"</script>' dans le 'head' du HTML

Code JQuery :

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
function getDatas(url, callback) {
    let x, callbackOriginal = [], ligne, Field, Rec = [], objData = {};
 
    //On fait une copie du tableau 'callback' qui contient les valeurs des éléments 'select' dans callbackOriginal
    callbackOriginal = Object.values(callback);
 
    fetch(url)
        .then((response) => response.json())
        .then((data) => {
            objData = data.records;
 
            for (x = 0; x < objData.length; x += 1) {
 
                Field = objData[x]['fields'];
 
                Rec = [Field.type_dossier, String(Field.commune), Field.type_decision, Field.etat, Field.circonscription];
                //Rec[0] = Field.type_dossier, Rec[1] = String(Field.commune), Rec[2] = Field.type_decision, etc.. 
 
                // On vérifie et remplace dans les deux tableaux ('callback' et 'Rec') si 'Field.type_decision' renvoi 'undefined'
                if (Field.type_decision === undefined) {
                    Rec[2] = "";
                    callback[2] = "";
                } else {
                // Sinon on réinitialise la valeur par défaut via le tableau 'callbackOriginal'
                    callback[2] = callbackOriginal[2];
                }
 
                // On compare les deux tableaux et s’ils sont identiques, on ajoute une ligne dans la table
                if (JSON.stringify(callback) === JSON.stringify(Rec)) {
                    ligne = `<tr class="data">` +
                        `<td> ${Field.type_dossier}</td>` +
                        `<td> ${Field.commune}</td>` +
                        `<td> ${Rec[2]}</td>` + // = Field.type_decision
                        `<td> ${Field.etat}</td>` +
                        `<td> ${Field.circonscription}</td>` +
                        `<td> ${Field.nom_dossier}</td></tr>`;
                    $('table').append(ligne);// Affiche une nouvelle ligne qui correspond aux critères de recherche 
                }
            }
        })
        .catch(error => console.log('Erreur!'));
}
 
$(function () {
    (function ($) {
 
        //click sur le bouton en JQuery qui correspond à 'document.getElementById("rechecher").addEventListener('click', (e) => {})' en JavaScript
        $('#rechecher').on('click', function () {
            let URL = "https://opendata.paris.fr/api/records/1.0/search/?dataset=dossiers-recents-durbanisme&q=&rows=5000&sort=-commune&facet=type_dossier&facet=commune&facet=etat&facet=type_decision&facet=circonscription&refine.type_dossier=Permis+de+construire",
                optionsselect = [];
 
            $('.data').remove(); //RAZ tableau (on supprime de la table les balises '<tr class="data"></tr>')
 
            //On rempli le tableau 'optionsselect' avec les valeurs des différents éléments 'select'
            optionsselect[0] = $('#select_un option:selected').text(); //type_dossier 
            optionsselect[1] = $('#select_deux option:selected').text(); // commune
            optionsselect[2] = $('#select_trois option:selected').text(); //type_decision
            optionsselect[3] = $('#select_quatre option:selected').text(); // etat
            optionsselect[4] = $('#select_cinq option:selected').text(); // circonscription
 
            getDatas(URL, optionsselect); // Puis on appel la fonction avec ces deux paramètres
        });
    })(jQuery);
});

Faire une requête Ajax

AJAX

Discussions similaires

Partager

Partager