浏览代码

Ajout exemple API TheMovieDB.org

Benoît Hubert 8 年之前
父节点
当前提交
9d10189d38
共有 3 个文件被更改,包括 44 次插入1 次删除
  1. 10 0
      exemples/ajax-requete-themoviedborg/contenu.html
  2. 33 0
      exemples/ajax-requete-themoviedborg/script.js
  3. 1 1
      exemples/liste.json

+ 10 - 0
exemples/ajax-requete-themoviedborg/contenu.html

@@ -0,0 +1,10 @@
+<h5>API themoviedb.org</h5>
+
+<form id="movie-title">
+    <p>Entrez un titre de film:</p>
+    <input type="text" name="title" placeholder="Titre" />
+    <button type="submit" class="blue" disabled="disabled">Go</button>
+</form>
+
+<div style="border: 1px solid #888; padding: 10px; margin: 10px;" id="tmdb-results">
+</div>

+ 33 - 0
exemples/ajax-requete-themoviedborg/script.js

@@ -0,0 +1,33 @@
+// Gère la soumission du formulaire:
+// récupère la valeur entrée et s'en sert pour interroger
+// l'API de themoviedb.org
+var form = $('#movie-title');
+var apiKey;
+var tmdbUrl;
+var tmdbImageUrl = 'http://image.tmdb.org/t/p/w185/';
+form.submit(function(evt) {
+    evt.preventDefault();
+    var inputTitle = form.find('input[name="title"]');
+    var title = inputTitle.val();
+    $.get(tmdbUrl + encodeURIComponent(title),
+    function(data) {
+          var movies = data.results;
+          for(i=0; i<movies.length;i++) {
+            var m = movies[i];
+            $('#tmdb-results').append('<div style="border-bottom: 1px solid #ddd">' + 
+                '<img style="float:right;" src="' + tmdbImageUrl + m.poster_path + '" />' +
+                '<h3>' + m.title + '</h3>' +
+                '<p>' + m.overview + '</p>' +
+            '</div><div style="clear:both"></div>');  
+          }
+    });
+})
+
+// Charge la clé d'API
+// (ne PAS la sauver dans Git)
+$.get('/exemples/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')
+    .prop('disabled', false);
+})

+ 1 - 1
exemples/liste.json

@@ -1 +1 @@
-[{"slug":"selecteurs-basiques","title":"Sélecteurs basiques"},{"slug":"selecteurs-multiples","title":"Sélecteurs multiples"},{"slug":"ajax-requete-randomuserme","title":"AJAX - Requête randomuser.me"}]
+[{"slug":"selecteurs-basiques","title":"Sélecteurs basiques"},{"slug":"selecteurs-multiples","title":"Sélecteurs multiples"},{"slug":"ajax-requete-randomuserme","title":"AJAX - Requête randomuser.me"},{"slug":"ajax-requete-themoviedborg","title":"AJAX - Requête themoviedb.org"}]