<p>There was a mistake in the ajax request. <br>I was using POST instead of GET.</p>

<p>1) After installing the plugin :</p>

<p>Add <strong>elementapi.php</strong> to your <code>/craft/config/</code> directory</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>2) <strong>Enabling CSRF Protection</strong>
add <code>'enableCsrfProtection' =&gt; true</code> to your <code>/craft/config/general.php</code> file.</p>

<p>3) getting entries with ajax :</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="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) {
                // Total fail.
            });
        });
    &lt;/script&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;div id="container"&gt;
    {{ getCsrfInput() }}
...
</code></pre>

CC BY-SA 3.0
2016-05-30T20:33:15.673Z
2016-05-30T20:33:15.673Z
benoit_mire
<p>I'd like to use the <a href="https://github.com/pixelandtonic/ElementAPI" rel="nofollow noreferrer">Element API</a> plugin.
I've follow the instructions mentioned here: <a href="https://craftcms.stackexchange.com/questions/15015/elementapi-can-i-use-javascript-ajax-to-load-json">ElementAPI - Can I use javascript/ajax to load json</a></p>

<p>Here is my config/elementapi.php file :</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>and here my ajax request:</p>

<pre><code>    $(function () {
        var data = {
            'CSRF': $('input[name="CRAFT_CSRF_TOKEN"]').val(),
        };

        $.ajax({
            'type': 'post',
            '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>

<p>But it always returns a 400 error (as the JSON file looks like it doesn't exist).</p>

<p>What have I missed? Could someone provide a working example?</p>

<p>Thanks!</p>

CC BY-SA 3.0
2016-05-30T14:00:42.543Z
Have you enabled ElementAPI plugin in the settings/plugin admin ui?
Mark Watson
CC BY-SA 3.0
2016-05-30T15:00:07.493Z
Yes I did. Also I'm running craft locally with Mamp. Don't know if that could cause any trouble...
benoit_mire
CC BY-SA 3.0
2016-05-30T15:11:42.377Z
Another dev is using Mamp and it runs fine.
Mark Watson
CC BY-SA 3.0
2016-05-30T15:34:39.977Z
I've just realized that I'm able to reach the json file by entering its url in the browser. My ajax function still returns a 400 error though...
benoit_mire
CC BY-SA 3.0
2016-05-30T15:48:26.160Z
Servers see Ajax requests almost identically to "regular" HTTP requests (they just come with 1 extra header) so I doubt it’s something server-side. Double-check that you're pointing the Ajax request to the right URL.
Brandon Kelly
CC BY-SA 3.0
2016-05-30T15:59:17.400Z
It's weird because I can reach the file by clicking the url from the 400 error that showing up in the developer tool window. I've tried to clear my cache and to browse in incognito mode...
Could it has something to do with my htaccess file ? I didn't made any change on it.
benoit_mire
CC BY-SA 3.0
2016-05-30T18:34:58.057Z
You're using the stock Craft `.htaccess` file, then? Can you edit the original question to include the AJAX code you're using as well as your `config/elementapi.php` file?
Brad Bell
CC BY-SA 3.0
2016-05-30T18:52:38.957Z
I was using POST not GET.
Just figured out by reading my question...
Thanks anyway
benoit_mire
CC BY-SA 3.0
2016-05-30T19:42:59.430Z
Ahh... nice catch.  Would you mind adding that as an official answer to this question?
Brad Bell
<ajax><plugin-elementapi>
How do I get started with Element API plugin?
# How do I get started with Element API plugin?

(Asked by: username_0 on 2016-05-30)

I'd like to use the Element API plugin.
I've follow the instructions mentioned here: ElementAPI - Can I use javascript/ajax to load json
Here is my config/elementapi.php file :
 [
        '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"),
                ];
            },
        ]
    ]
];

and here my ajax request:
    $(function () {
        var data = {
            'CSRF': $('input[name="CRAFT_CSRF_TOKEN"]').val(),
        };

        $.ajax({
            'type': 'post',
            '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')
            });
        });

But it always returns a 400 error (as the JSON file looks like it doesn't exist).
What have I missed? Could someone provide a working example?
Thanks!

**Tags:** ajax, plugin-elementapi

> **Comments:**
> **username_1**: Have you enabled ElementAPI plugin in the settings/plugin admin ui?  
> **username_0**: Yes I did. Also I'm running craft locally with Mamp. Don't know if that could cause any trouble...  
> **username_1**: Another dev is using Mamp and it runs fine.  
> **username_0**: I've just realized that I'm able to reach the json file by entering its url in the browser. My ajax function still returns a 400 error though...  
> **username_2**: Servers see Ajax requests almost identically to "regular" HTTP requests (they just come with 1 extra header) so I doubt it’s something server-side. Double-check that you're pointing the Ajax request to the right URL.  
> **username_0**: It's weird because I can reach the file by clicking the url from the 400 error that showing up in the developer tool window. I've tried to clear my cache and to browse in incognito mode... Could it has something to do with my htaccess file ? I didn't made any change on it.  
> **username_3**: You're using the stock Craft `.htaccess` file, then? Can you edit the original question to include the AJAX code you're using as well as your `config/elementapi.php` file?  
> **username_0**: I was using POST not GET. Just figured out by reading my question... Thanks anyway  
> **username_3**: Ahh... nice catch.  Would you mind adding that as an official answer to this question?  

---

## 1 answers

### Answer by username_0 on 2016-05-30. Score: 1 | Accepted answer

There was a mistake in the ajax request. I was using POST instead of GET.
1) After installing the plugin :
Add elementapi.php to your /craft/config/ directory
 [
        '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")
                ];
            },
        ]
    ]
];

2) Enabling CSRF Protection
add 'enableCsrfProtection' => true to your /craft/config/general.php file.
3) getting entries with ajax :
_layout.html 

...






    {{ getCsrfInput() }}
...


---

