<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>

CC BY-SA 3.0
2016-05-30T18:57:20.443Z
2016-05-30T18:57:20.443Z
benoit_mire
<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>

CC BY-SA 3.0
2016-05-13T11:27:04.293Z
2016-05-30T19:14:08.507Z
2016-05-30T19:14:08.507Z
Damon
<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>

<plugin-elementapi><ajax><json>
ElementAPI - Can I use javascript/ajax to load json
# 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 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
 [
        '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..
Finally, (again for simplicity) here is an example of getting my news entries via ajax on docReay
_layout.html

...






    {{ 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!


---

