Explorar el Código

Fix the AJAX examples

Benoît Hubert hace 8 años
padre
commit
b4be876f17

+ 1 - 1
exemples/jquery/ajax-envoi-formulaire-par-post/example.html

@@ -1,7 +1,7 @@
 <h1>AJAX - Envoi formulaire par POST</h1>
 
 <p>Presque la même chose que l'exemple précédent !</p>
-<form id="ajax-form-post" method="POST" action="/ajax-form-post">
+<form id="ajax-form-post" method="POST" action="/jquery/ajax/form-post">
     <input type="text" name="title" placeholder="Titre" /><br>
     <textarea name="text" rows="10" placeholder="Collez du texte"></textarea><br>
     <input type="submit" class="btn btn-primary" value="Envoyer" />

+ 1 - 1
exemples/jquery/ajax-exemple-simple/script.js

@@ -1,3 +1,3 @@
-$.get('/ajax-example', function(data) {
+$.get('/jquery/ajax/example-simple', function(data) {
    $('#ajax-html').html(data); 
 });

+ 1 - 1
exemples/jquery/ajax-requete-themoviedborg/config.json

@@ -3,7 +3,7 @@
   "category": "ajax",
   "html": [ "example.html" ],
   "js": [ "script.js" ],
-  "css": [],
+  "css": [ "styles.css" ],
   "libsJs": [ "jquery-3.2.1.min.js" ],
   "libsCss": [ "styles.css" ]
 }

+ 15 - 0
exemples/jquery/ajax-requete-themoviedborg/example.html

@@ -1,5 +1,20 @@
 <h5>API themoviedb.org</h5>
 
+<p class="notice">
+  Cet exemple fait appel à une API protégée par une clé d'accès.
+  Pour récupérer cette clé :
+</p>
+<ol>
+<li>Cliquez sur
+    <a target="_blank" href="http://bhubr.eu/tmdb.php?code=CGI-JQUERY-2017">ce lien</a> puis <strong>copiez</strong> ce qui s'affiche.
+</li>
+<li>
+    <strong>Collez</strong> ce que vous voyez dans le fichier <span class="code">
+        exemples/jquery/ajax-requete-themoviedborg/tmdb-key.json
+    </span> (en partant de la racine de ce dossier).
+</li>
+</ol>
+
 <form id="movie-title">
     <p>Entrez un titre de film:</p>
     <input type="text" name="title" placeholder="Titre" />

+ 1 - 1
exemples/jquery/ajax-requete-themoviedborg/script.js

@@ -25,7 +25,7 @@ form.submit(function(evt) {
 
 // Charge la clé d'API
 // (ne PAS la sauver dans Git)
-$.get('/exemples/ajax-requete-themoviedborg/tmdb-key.json', function(data) {
+$.get('/exemples/jquery/ajax-requete-themoviedborg/tmdb-key.json', function(data) {
     apiKey = data.key;
     tmdbUrl = 'http://api.themoviedb.org/3/search/movie?api_key=' + apiKey + '&include_adult=false&page=1&language=en-US&query=';
     form.find('button')

+ 8 - 0
exemples/jquery/ajax-requete-themoviedborg/styles.css

@@ -0,0 +1,8 @@
+/* styles.css */
+.notice {
+  color: #b33;
+  font-size: 90%;
+}
+.code {
+  font-family: "Courier New", Courier;
+}

+ 2 - 2
server.js

@@ -15,7 +15,7 @@ var app = require('./sandboxApp');
 // 1er exemple: envoie du HTML généré dynamiquement.
 // On utilise app.get pour attacher un gestionnaire à l'URL /ajax-example
 // uniquement avec la méthode GET
-app.get('/ajax-example', function(req, res) {
+app.get('/jquery/ajax/example-simple', function(req, res) {
   var date = new Date();
   var exampleHtml = '<p>Un peu de HTML retourné par le serveur.</p>' +
     '<p><em>Généré le: ' + date.toString() + '</em></p>';
@@ -34,7 +34,7 @@ app.get('/jquery/ajax/form-get', function(req, res) {
 
 // 3ème exemple : envoi formulaire par méthode POST
 // Ici les paramètres viennent de req.body
-app.post('/ajax-form-post', function(req, res) {
+app.post('/jquery/ajax/form-post', function(req, res) {
   var title = req.body.title;
   var text = req.body.text;
   var exampleHtml = '<h2>' + title + '</h2>' +