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 : 404
Taille : 38,3 Ko

Nom : vueformulaire.PNG
Affichages : 404
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 : 359
Taille : 108,9 Ko

Nom : Screenshot 2022-05-05 at 16-49-22 Document.png
Affichages : 359
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);
});

Faire une requête Ajax

AJAX

Vue hybride

Discussions similaires

Partager

Partager