json.html 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>RequireJS JSON plugin</title>
  6. <meta name="viewport" content="width=device-width, initial-scale=1">
  7. </head>
  8. <body>
  9. <div id="wrapper">
  10. <h1>RequireJS JSON plugin</h1>
  11. <p>Helper for loading JSON files, it will also work during optimization (wrapping JSON files into a `define` call).</p>
  12. <p>If you want to load JSONP data use the `async` plugin instead.</p>
  13. <p>You can set the flag <code>`!bust`</code> to prevent caching the JSON response, it will append a query argument <code>&quot;bust=RANDOM_INTEGER&quot;</code> to the URI.</p>
  14. <h2>Output:</h2>
  15. <div id="output" style="border:1px solid #ccc; background:#f5f5f5; padding:10px 20px"></div>
  16. </div>
  17. <script src="../lib/require.js"></script>
  18. <script>
  19. require.config({
  20. waitSeconds : 2,
  21. paths : {
  22. text : '../lib/text', //text is required
  23. json : '../src/json' //alias to plugin
  24. }
  25. });
  26. // adding the flag `!bust` to the end of dependency name will avoid caching
  27. require(['json!data/foo.json', 'json!data/bar.json!bust'], function(foo, bar){
  28. var out = document.getElementById('output');
  29. //data is parsed into an object
  30. out.innerHTML += '<p><b>lorem:<\/b> '+ foo.lorem +'<\/p>';
  31. out.innerHTML += '<p><b>bar:<\/b> '+ foo.bar +'<\/p>';
  32. out.innerHTML += '<p><b>message:<\/b> '+ bar.text +'<\/p>';
  33. });
  34. </script>
  35. </body>
  36. </html>