Answers.Body: <p>You better use GET rather than POST :</p>
  
  <pre><code>$(function () {
      var data = {
          'CSRF': $('input[name="CRAFT_CSRF_TOKEN"]').val(),
      };
  
      $.ajax({
          'type': 'get',
          'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
          'cache': false,
          'data': data,
          'url': 'news.json',
          'dataType': 'json',
          'timeout': 50000
      }).done(function (response) {
         console.log(response);
      }).fail(function (error) {
         console.log('totalfail')
      });
  });
  </code></pre>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-30T18:57:20.443Z
Answers.LastActivityDate: 2016-05-30T18:57:20.443Z
Answers.UserDisplayName: benoit_mire
Answers.Body: <p>Totally do-able.</p>
  
  <p>Once you have the <a href="https://github.com/pixelandtonic/ElementAPI" rel="nofollow">ElementAPI</a> plugin downloaded and installed, you'll want to make sure you have created a file called <code>elementapi.php</code> and it is in your <code>/craft/config/</code> directory.</p>
  
  <p>For simplicity's sake, I've used a stripped down version of the example on the github page.</p>
  
  <p><strong>elementapi.php</strong></p>
  
  <pre><code>&lt;?php
  namespace Craft;
  
  return [
      'endpoints' =&gt; [
          'news.json' =&gt; [
              'elementType' =&gt; 'Entry',
              'criteria' =&gt; ['section' =&gt; 'news'],
              'transformer' =&gt; function (EntryModel $entry) {
                  return [
                      'title' =&gt; $entry-&gt;title,
                      'url' =&gt; $entry-&gt;url,
                      'jsonUrl' =&gt; UrlHelper::getUrl("news/{$entry-&gt;id}.json")
                  ];
              },
          ]
      ]
  ];
  </code></pre>
  
  <p>Going back to your <code>/craft/config/</code> directory, you will want to enable <a href="https://craftcms.com/support/csrf-protection" rel="nofollow">CSRF protection.</a>.</p>
  
  <p>Finally, (again for simplicity) here is an example of getting my news entries via ajax on docReay</p>
  
  <p><strong>_layout.html</strong></p>
  
  <pre><code>&lt;head&gt;
  ...
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"&gt;  &lt;/script&gt;
  &lt;script&gt;
      $(function () {
          var data = {
              'CSRF': $('input[name="CSRF"]').val(),
          };
  
          $.ajax({
              'type': 'get',
              'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
              'cache': false,
              'data': data,
              'url': 'news.json',
              'dataType': 'json',
              'timeout': 50000
          }).done(function (response) {
              console.log(response);
          }).fail(function (error) {
                  // Total fail.
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="container"&gt;
      {{ getCsrfInput() }}
  ...
  </code></pre>
  
  <p>Then if you look at your console, you should see something like this:</p>
  
  <pre><code>{"data":[{"title":"We just installed Craft!","url":"http:\/\/craftsandbox.dev\/news\/2016\/we-just-installed-craft","jsonUrl":"http:\/\/craftsandbox.dev\/news\/3.json"}],"meta":{"pagination":{"total":1,"count":1,"per_page":100,"current_page":1,"total_pages":1,"links":[]}}}
  </code></pre>
  
  <p>Hope this helps!</p>
  
Answers.ContentLicense: CC BY-SA 3.0
Answers.CreationDate: 2016-05-13T11:27:04.293Z
Answers.LastActivityDate: 2016-05-30T19:14:08.507Z
Answers.LastEditDate: 2016-05-30T19:14:08.507Z
Answers.UserDisplayName: Damon
Body: <p>Probably a dumb question, but since i wasn't sure while reading on github, i'll ask here.</p>
  
  <p>I am wondering if I can reach the JSON I created with an URL or is it only for use in PHP?</p>
  
  <p>I would like to load entries from craft from a json with ajax when i click on a button and i wasn't sure if it was possible with this plugin since there is no exemple.</p>
  
  <p>Anybody can help me?</p>
  
  <p>Thanks!</p>
  
Tags: <plugin-elementapi><ajax><json>
Title: ElementAPI - Can I use javascript/ajax to load json
ThreadText: # ElementAPI - Can I use javascript/ajax to load json
  
  (Asked by: username_0 on 2016-05-12)
  
  Probably a dumb question, but since i wasn't sure while reading on github, i'll ask here.
  
  I am wondering if I can reach the JSON I created with an URL or is it only for use in PHP?
  
  I would like to load entries from craft from a json with ajax when i click on a button and i wasn't sure if it was possible with this plugin since there is no exemple.
  
  Anybody can help me?
  
  Thanks!
  
  **Tags:** plugin-elementapi, ajax, json
  
  
  ---
  
  ## 2 answers
  
  ### Answer by username_1 on 2016-05-30. Score: 3
  
  You better use GET rather than POST :
  
  ```
  $(function () {
      var data = {
          'CSRF': $('input[name="CRAFT_CSRF_TOKEN"]').val(),
      };
  
      $.ajax({
          'type': 'get',
          'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
          'cache': false,
          'data': data,
          'url': 'news.json',
          'dataType': 'json',
          'timeout': 50000
      }).done(function (response) {
         console.log(response);
      }).fail(function (error) {
         console.log('totalfail')
      });
  });
  
  ```
  
  
  ---
  
  ### Answer by username_2 on 2016-05-13. Score: 3
  
  Totally do-able.
  
  Once you have the [ElementAPI](https://github.com/pixelandtonic/ElementAPI) plugin downloaded and installed, you'll want to make sure you have created a file called `elementapi.php` and it is in your `/craft/config/` directory.
  
  For simplicity's sake, I've used a stripped down version of the example on the github page.
  
  **elementapi.php**
  
  ```
  <?php
  namespace Craft;
  
  return [
      'endpoints' => [
          'news.json' => [
              'elementType' => 'Entry',
              'criteria' => ['section' => 'news'],
              'transformer' => function (EntryModel $entry) {
                  return [
                      'title' => $entry->title,
                      'url' => $entry->url,
                      'jsonUrl' => UrlHelper::getUrl("news/{$entry->id}.json")
                  ];
              },
          ]
      ]
  ];
  
  ```
  
  Going back to your `/craft/config/` directory, you will want to enable [CSRF protection.](https://craftcms.com/support/csrf-protection).
  
  Finally, (again for simplicity) here is an example of getting my news entries via ajax on docReay
  
  **\_layout.html**
  
  ```
  <head>
  ...
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js">  </script>
  <script>
      $(function () {
          var data = {
              'CSRF': $('input[name="CSRF"]').val(),
          };
  
          $.ajax({
              'type': 'get',
              'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
              'cache': false,
              'data': data,
              'url': 'news.json',
              'dataType': 'json',
              'timeout': 50000
          }).done(function (response) {
              console.log(response);
          }).fail(function (error) {
                  // Total fail.
              });
          });
      </script>
  </head>
  
  <body>
  <div id="container">
      {{ getCsrfInput() }}
  ...
  
  ```
  
  Then if you look at your console, you should see something like this:
  
  ```
  {"data":[{"title":"We just installed Craft!","url":"http:\/\/craftsandbox.dev\/news\/2016\/we-just-installed-craft","jsonUrl":"http:\/\/craftsandbox.dev\/news\/3.json"}],"meta":{"pagination":{"total":1,"count":1,"per_page":100,"current_page":1,"total_pages":1,"links":[]}}}
  
  ```
  
  Hope this helps!
  
  
  ---
  
  