Craft CMS Stack Exchange is a question and answer site for administrators, end users, developers and designers for Craft CMS. It only takes a minute to sign up.
Sign up to join this community
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!
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')
});
});
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
<?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..
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!
