You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: README.md
+30-5Lines changed: 30 additions & 5 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -7,36 +7,61 @@ accessibles par GET et retournées en JSON.
7
7
8
8
Le développement de ces exemples a été effectué sur Twitch le 1 février 2022. [La rediffusion de cette session](https://serialstreameur.fr/comment-utiliser-ajax-depuis-javascript-pour-afficher-des-donnees-provenant-d-une-api-externe.html) est visible sur le site [Serial Streameur](https://serialstreameur.fr/). Des extraits sont également disponibles pour chaque exemple.
9
9
10
-
## jQuery
10
+
D'autres exemples ont été ajoutés depuis, hors stream, pour simplifier les copier/coller ou la création de projets simples sans devoir se taper la documentation "officielle" trop rarement limpide !
11
+
12
+
## jQuery (GET)
11
13
12
14
Récupération de la liste des livres en utilisant la commande $.ajax() de jQuery. L'affichage se fait par création de
13
15
HTML depuis jQuery.
14
16
15
17
[Voir la vidéo et les explications](https://trucs-de-developpeur-web.fr/faire-de-l-ajax-en-javascript-avec-jquery.html)
16
18
17
-
## jQuery-with-HTML-Templates
19
+
## jQuery-with-HTML-Templates (GET)
18
20
19
21
Récupération de la liste des livres en utilisant la commande $.ajax() de jQuery. Affichage par clonage d'un template
20
22
HTML en jQuery.
21
23
22
24
[Voir la vidéo et les explications](https://trucs-de-developpeur-web.fr/faire-de-l-ajax-en-javascript-avec-jquery-et-un-template-html.html)
23
25
24
-
## Web-Fetch-API
26
+
## Web-Fetch-API (GET)
25
27
26
28
Utilisation de l'API Fetch JavaScript récente pour récupérer les données. Affichage par création de code HTML par
27
29
manipulation du DOM.
28
30
29
31
[Voir la vidéo et les explications](https://trucs-de-developpeur-web.fr/faire-de-l-ajax-en-javascript-avec-fetchapi.html)
30
32
31
-
## Web-Fetch-API-VueJS
33
+
## Web-Fetch-API-Get (GET)
34
+
35
+
Utilise Fetch API pour faire une requête GET avec deux paramètres à [un programme de dump en PHP](https://github.com/DeveloppeurPascal/PHP-API-Dump) côté serveur.
36
+
37
+
## Web-Fetch-API-Post (POST)
38
+
39
+
Utilise Fetch API pour faire une requête POST avec deux paramètres à [un programme de dump en PHP](https://github.com/DeveloppeurPascal/PHP-API-Dump) côté serveur.
40
+
41
+
## Web-Fetch-API-VueJS (GET)
32
42
33
43
Utilisation de l'API Fetch JavaScript récente pour récupérer les données. Affichage des données en utilisant VueJS.
34
44
35
45
[Voir la vidéo et les explications](https://trucs-de-developpeur-web.fr/faire-de-l-ajax-en-javascript-avec-fetch-api-et-vuejs-pour-l-affichage.html)
36
46
37
-
## XMLHttpRequest
47
+
## XMLHttpRequest (GET)
38
48
39
49
Utilisation de XMLHttpRequest pour récupérer les données. L'affichage étant fait aussi par manipulation du DOM.
40
50
41
51
[Voir la vidéo et les explications](https://trucs-de-developpeur-web.fr/faire-de-l-ajax-en-javascript-avec-xmlhttprequest.html)
42
52
53
+
## XMLHttpRequest-GET (GET)
54
+
55
+
Une requête en GET pour montrer comment simuler un envoi de valeurs comme l'aurait fait un formulaire HTML classique avec une méthode GET.
56
+
57
+
Utilise le programme [PHP API Dump](https://github.com/DeveloppeurPascal/PHP-API-Dump) comme destination des requêtes.
58
+
59
+
GET = QUERY_String => les paramètres sont envoyés dans l'URL.
60
+
61
+
## XMLHttpRequest-POST (POST)
62
+
63
+
Une requête en POST pour montrer comment simuler un envoi de valeurs comme l'aurait fait un formulaire HTML classique avec une méthode POST.
64
+
65
+
Utilise le programme [PHP API Dump](https://github.com/DeveloppeurPascal/PHP-API-Dump) comme destination des requêtes.
66
+
67
+
POST => les paramètes sont envoyés dans le corps de la demande, mais leur encapsulation dépend du content-Type ajouté dans le header de la requête.
0 commit comments