Vous pourriez rencontrer un probl\u00e8me lorsque vous essayez de lire le document JSON si vous ne mettez pas ce code sur un serveur. Pour des raisons de s\u00e9curit\u00e9 certains navigateurs tel que Google Chrome ne vous permettent pas de charger des fichiers externes sur les dossiers locaux. Si vous devez charger un fichier Dans la s\u00e9rie des syst\u00e8me de template, on publiera tr\u00e8s prochainement un article sur un framework de template nomm\u00e9 On va utiliser pour cette d\u00e9monstration bien \u00e9videmment deux ressources essentielles : jQuery et le plugin jQuery Templates.<\/b><\/p>\n Chargement de Chargement de Conclusion :<\/b> Il existe de nombreux avantages \u00e0 utiliser un syst\u00e8me de templates \u00e0 l’aide de jQuery. Le premier d’\u00e9vidence comme dans tout syst\u00e8me de template est de s\u00e9parer le contenu de l’UX, de l’exp\u00e9rience utilisateur (comportement des pages). On peut donc affiner, valider, de mani\u00e8re agile, les r\u00e8gles fonctionnelles par un grand nombre d’it\u00e9rations rapides, le tout c\u00f4t\u00e9 client\/m\u00e9tier sans avoir \u00e0 passer par une boucle de d\u00e9veloppement chronophage.<\/p>\n Une des choses les plus ennuyeuses si vous travaillez sur une API qui vous fournit essentiellement des flux JSON, c’est la difficult\u00e9 \u00e0 valider la… <\/p>\n.json<\/code> en local, le mieux est donc d’utiliser firefox, safari ou tout simplement charger le fichier appelant la source de donn\u00e9es au format .json<\/code> sur un serveur en local type WAMP<\/code>, MAMP<\/code> ou EASYPHP<\/code>.<\/p>\nmustache<\/code> mais bon l’instant, on part avec le plus \u00e9vident et le plus facile, \u00e0 savoir jQuery et des plugins bien choisis.<\/b><\/p>\n\n
http:\/\/code.jquery.com\/jquery-1.10.2.min.js<\/a><\/li>\n
http:\/\/github.com\/jquery\/jquery-tmpl<\/a><\/li>\n<\/ul>\nUtiliser une source
.json<\/code> avec une template jQuery<\/h4>\n\n
ajax_1.html<\/code>
\n Page dont la source est un fichier .json<\/code>.\n <\/li>\najax_if_2.html<\/code>
\n Page dont la source est un fichier .json<\/code> avec une condition if<\/code> sur l’affichage de l’image par d\u00e9faut.\n <\/li>\n<\/ul>\najax_1.html<\/code><\/b>
\n ![\"jQuery,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/10\/jquery_json_1.jpg\")
<\/p>\najax_if_2.html<\/code><\/b>
\n ![\"jQuery,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2013\/10\/jquery_json_3.jpg\")
<\/p>\ndata.json<\/code> pour ajax_if_2.html<\/code><\/b>
\n La source de donn\u00e9es au format .json<\/code> dans le cas de ajax_if_2.html<\/code>.<\/p>\n\r\n {\r\n \"books\" : [\r\n {\r\n \t\t\t\"imgSrc\":\"cover1.jpg\",\r\n \t\t\t\"title\":\"Captain America\",\r\n \t\t\t\"description\":\"Stars and Stripes jusqu'au slip\",\r\n \t\t\t\"year\":\"2010\",\r\n \t\t\t\"number\":\"1\"\r\n },\r\n {\r\n \t\t\t\"imgSrc\":\"cover2.jpg\",\r\n \t\t\t\"title\":\"Rescue\",\r\n \t\t\t\"description\":\"La vierge de fer\",\r\n \t\t\t\"year\":\"2011\",\r\n \t\t\t\"number\":\"2\"\r\n },\r\n {\r\n \t\t\t\t\"imgSrc\":\"cover3.jpg\",\r\n \t\t\t\t\"title\":\"Hulk\",\r\n \t\t\t\t\"description\":\"Eco warrior\",\r\n \t\t\t\t\"year\":\"2012\",\r\n \t\t\t\t\"number\":\"3\"\r\n }\r\n ]\r\n }\r\n <\/pre>\najax_1.html<\/code><\/b><\/p>\n\r\n <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n "http:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n\r\n <html lang="en">\r\n <head>\r\n \t<meta http-equiv="Content-Type" content="text\/html; charset=utf-8">\r\n \t<title>jQuery Template<\/title>\r\n <style type="text\/css">\r\n \/*\r\n - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \r\n Styling\r\n - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\r\n *\/\r\n body {\r\n font-family: Tahoma,Trebuchet,Arial,Verdana,"Bitstream Vera Sans",sans-serif;\r\n font-size: 12px;\r\n \tbackground-color: #fff;\r\n \tpadding: 10px;\r\n \tmargin: 5px 8px 13px 0;\r\n \twidth: 90%;\r\n }\r\n\r\n .book {\r\n background:#efefef;\r\n width:200px;\r\n position: relative;\r\n padding: 20px 20px 20px 20px;\r\n margin: 0px 20px 0px 0px;\r\n display: inline-block;\r\n -webkit-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);\r\n \t-moz-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);\r\n \tbox-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);\r\n }\r\n .book img {\r\n background-color: #F6F6F6;\r\n border: 1px solid #CFCFCF;\r\n padding: 12px; \r\n }\r\n .book h3 {\r\n font-size:24px;\r\n }\r\n\r\n .book .description {\r\n font-size: 14px;\r\n text-align: left;\r\n margin: 10px 0;\r\n padding: 0;\r\n }\r\n\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div id="output"> <\/div>\r\n <script src="_static\/js\/jquery-1.10.2.min.js"><\/script> \r\n <script src="_static\/js\/plugins.js"><\/script> \r\n <script>\r\n $(document).ready( \r\n \tfunction(){\t\r\n \t\tvar PopulateBook = function(data){\r\n \t\t\tconsole.log(data.books);\r\n \t\t\t$("#catalogue").tmpl(data.books).appendTo( "#output" );\r\n \t\t}\r\n \t\t$.ajax({\r\n \t\t\t\ttype: 'get',\r\n \t\t\t\turl: 'data.json',\r\n \t\t\t\tsuccess : PopulateBook,\r\n \t\t\t\tdataType: "json"\r\n \t\t \t\t}\r\n \t\t\t)\r\n \t\t}\r\n \t);\r\n <\/script> \r\n <!-- end scripts --> \r\n <script id="catalogue" type="text\/x-jquery-tmpl">\r\n \t<div class="book"><img src="${imgSrc}" \/>\r\n \t\t<div class="details">\r\n \t\t\t<div class="title">\r\n \t\t\t\t<h3>${title}<\/h3>\r\n \t\t\t<\/div>\r\n \t\t\t<div class="description">\r\n \t\t\t\t<strong>Description :<\/strong> ${description}\r\n \t\t\t<\/div>\r\n \t\t\t<div class="year">\r\n \t\t\t\t<strong>Année :<\/strong> ${year}\r\n \t\t\t<\/div>\r\n \t\t\t<div class="number">\r\n \t\t\t\t<strong>Numéro du magazine :<\/strong> ${number}\r\n \t\t\t<\/div>\r\n \t\t\t<div class="themes">\r\n \t\t\t<ul>\r\n {{each themes}}\r\n \t\t\t\t<li>${$value}<\/li>\r\n \t\t\t{{\/each}}\r\n <\/ul>\r\n \t\t\t<\/div>\r\n \t\t<\/div>\r\n \t<\/div>\r\n <\/script>\r\n <\/body>\r\n <\/html>\r\n <\/pre>\ndata.json<\/code> pour ajax_if_2.html<\/code><\/b>
\n La source de donn\u00e9es au format .json<\/code> dans le cas de ajax_if_2.html<\/code>.<\/p>\n\r\n {\r\n \"books\" : [\r\n {\r\n \t\t\t\"imgSrc\":\"cover1.jpg\",\r\n \t\t\t\"title\":\"Captain America\",\r\n \t\t\t\"description\":\"Stars and Stripes jusqu'au slip\",\r\n \t\t\t\"year\":\"2010\",\r\n \t\t\t\"number\":\"1\"\r\n },\r\n {\r\n \t\t\t\"imgSrc\":\"cover2.jpg\",\r\n \t\t\t\"title\":\"Rescue\",\r\n \t\t\t\"description\":\"La vierge de fer\",\r\n \t\t\t\"year\":\"2011\",\r\n \t\t\t\"number\":\"2\"\r\n },\r\n {\r\n \t\t\t\t\"imgSrc\":\"\",\r\n \t\t\t\t\"title\":\"Hulk\",\r\n \t\t\t\t\"description\":\"Eco warrior\",\r\n \t\t\t\t\"year\":\"2012\",\r\n \t\t\t\t\"number\":\"3\"\r\n }\r\n ]\r\n }\r\n <\/pre>\najax_if_2.html<\/code><\/b><\/p>\n\r\n <!DOCTYPE html PUBLIC "-\/\/W3C\/\/DTD HTML 4.01 Transitional\/\/EN"\r\n "http:\/\/www.w3.org\/TR\/html4\/loose.dtd">\r\n\r\n <html lang="en">\r\n <head>\r\n \t<meta http-equiv="Content-Type" content="text\/html; charset=utf-8">\r\n \t<title>jQuery Template<\/title>\r\n <style type="text\/css">\r\n \/*\r\n - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \r\n Styling\r\n - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -\r\n *\/\r\n body {\r\n font-family: Tahoma,Trebuchet,Arial,Verdana,"Bitstream Vera Sans",sans-serif;\r\n font-size: 12px;\r\n \tbackground-color: #fff;\r\n \tpadding: 10px;\r\n \tmargin: 5px 8px 13px 0;\r\n \twidth: 90%;\r\n }\r\n\r\n .book {\r\n background:#efefef;\r\n width:200px;\r\n position: relative;\r\n padding: 20px 20px 20px 20px;\r\n margin: 0px 20px 0px 0px;\r\n display: inline-block;\r\n -webkit-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);\r\n \t-moz-box-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);\r\n \tbox-shadow: 1px 1px 7px -4px rgba(0, 0, 0, 0.25);\r\n }\r\n .book img {\r\n background-color: #F6F6F6;\r\n border: 1px solid #CFCFCF;\r\n padding: 12px; \r\n }\r\n .book h3 {\r\n font-size:24px;\r\n }\r\n\r\n .book .description {\r\n font-size: 14px;\r\n text-align: left;\r\n margin: 10px 0;\r\n padding: 0;\r\n }\r\n\r\n <\/style>\r\n <\/head>\r\n <body>\r\n <div id="output"> <\/div>\r\n <script src="_static\/js\/jquery-1.10.2.min.js"><\/script> \r\n <script src="_static\/js\/plugins.js"><\/script> \r\n <script>\r\n $(document).ready( \r\n \tfunction(){\t\r\n \t\tvar PopulateBook = function(data){\r\n \t\t\tconsole.log(data.books);\r\n \t\t\t$("#catalogue").tmpl(data.books).appendTo( "#output" );\r\n \t\t}\r\n \t\t$.ajax({\r\n \t\t\t\ttype: 'get',\r\n \t\t\t\turl: 'data.json',\r\n \t\t\t\tsuccess : PopulateBook,\r\n \t\t\t\tdataType: "json"\r\n \t\t \t\t}\r\n \t\t\t)\r\n \t\t}\r\n \t);\r\n <\/script> \r\n <!-- end scripts --> \r\n <script id="catalogue" type="text\/x-jquery-tmpl">\r\n \t<div class="book">\r\n {{if imgSrc}}\r\n \t\t<img src="${imgSrc}" \/>\r\n \t{{else}}\r\n \t\t<img src="default.jpg" \/>\r\n \t{{\/if}}\r\n \t\t<div class="details">\r\n \t\t\t<div class="title">\r\n \t\t\t\t<h3>${title}<\/h3>\r\n \t\t\t<\/div>\r\n \t\t\t<div class="description">\r\n \t\t\t\t<strong>Description :<\/strong> ${description}\r\n \t\t\t<\/div>\r\n \t\t\t<div class="year">\r\n \t\t\t\t<strong>Année :<\/strong> ${year}\r\n \t\t\t<\/div>\r\n \t\t\t<div class="number">\r\n \t\t\t\t<strong>Numéro du magazine :<\/strong> ${number}\r\n \t\t\t<\/div>\r\n \t\t<\/div>\r\n \t<\/div>\r\n <\/script>\r\n <\/body>\r\n <\/html>\r\n <\/pre>\nEn savoir plus<\/h2>\n
\n
http:\/\/coursesweb.net\/javascript\/convert-json-javascript<\/a><\/li>\n
http:\/\/blog.touv.fr\/2008\/11\/comment-traiter-du-json-pour-produire.html<\/a><\/li>\n
http:\/\/webhole.net\/2009\/11\/28\/how-to-read-json-with-javascript\/\t\t<\/a><\/li>\n
http:\/\/github.com\/jquery\/jquery-tmpl<\/a><\/li>\n
http:\/\/code.jquery.com\/jquery-1.10.2.min.js<\/a><\/li>\n
http:\/\/jquery.com\/<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"