<p>Make sure to check out <a href="https://craftcms.com/docs/routing" rel="nofollow">the documentation</a> on routing. Pay special attention to the part about action request(s).</p>

<p>In this example, I want to call a controller method via ajax on page load.</p>

<p><strong>MyPluginController.php</strong></p>

<pre><code>...

/**
 * Checks what the current status is RIGHT. NOW.
 *
 * @throws HttpException
 *
 */
public function actionCheckStatus()
{
    $this-&gt;requireAjaxRequest();

    $response = [
        'status' =&gt; 'open'
    ];

    $this-&gt;returnJson($response);
}

...
</code></pre>

<p><strong>jquery</strong></p>

<pre><code>$.ajax({
    'type': 'post',
    'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
    'cache': false,
    'data': data,
    'url': '/actions/pluginHandle/checkStatus',
    'dataType': 'json',
    'timeout': 50000
}).done(function (response) {
    // Success
}).fail(function (error) {
   // Total fail.
});
</code></pre>

<p>The key part to note is the url attribute in the ajax request. It is prepended with 'actions'. As you will note in the docs you can change 'actions' to whatever you want.</p>

CC BY-SA 3.0
2015-12-06T00:55:38.640Z
2016-01-17T17:18:33.287Z
2016-01-17T17:18:33.287Z
Damon
<p>For Craft 3:</p>

<pre><code>public function actionCheckStatus()
{
    $this-&gt;requireAcceptsJson();

    $response = [
        'status' =&gt; 'open'
    ];

    return $this-&gt;asJson($response);
}
</code></pre>

CC BY-SA 4.0
2018-06-01T11:45:13.230Z
2018-06-01T20:02:01.957Z
2018-06-01T20:02:01.957Z
Jeroen
<p>I would like to call an action method from within my plugin via ajax but I am always getting a 404 response. </p>

<p>I have a controller method that matches the ajax url:</p>

<p><strong>jquery</strong></p>

<pre><code>$.ajax({
    'type': 'post',
    'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
    'cache': false,
    'data': data,
    'url': 'pluginHandle/checkStatus',
    'dataType': 'json',
    'timeout': 50000
}).done(function (response) {
    // Success
}).fail(function (error) {
   // Total fail.
});
</code></pre>

<p><strong>MyPluginController.php</strong></p>

<pre><code>...

/**
 * Checks what the current status is RIGHT. NOW.
 *
 * @throws HttpException
 *
 */
public function actionCheckStatus()
{
    $this-&gt;requireAjaxRequest();

    $response = [
        'status' =&gt; 'open'
    ];

    $this-&gt;returnJson($response);
}

...
</code></pre>

<p>What am I doing wrong?</p>

<plugin-development><routes><ajax>
How can I call a controller method from the front-end using ajax
# How can I call a controller method from the front-end using ajax

(Asked by: username_0 on 2015-12-06)

I would like to call an action method from within my plugin via ajax but I am always getting a 404 response. 
I have a controller method that matches the ajax url:
jquery
$.ajax({
    'type': 'post',
    'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
    'cache': false,
    'data': data,
    'url': 'pluginHandle/checkStatus',
    'dataType': 'json',
    'timeout': 50000
}).done(function (response) {
    // Success
}).fail(function (error) {
   // Total fail.
});

MyPluginController.php
...

/**
 * Checks what the current status is RIGHT. NOW.
 *
 * @throws HttpException
 *
 */
public function actionCheckStatus()
{
    $this->requireAjaxRequest();

    $response = [
        'status' => 'open'
    ];

    $this->returnJson($response);
}

...

What am I doing wrong?

**Tags:** plugin-development, routes, ajax

---

## 2 answers

### Answer by username_0 on 2015-12-06. Score: 4 | Accepted answer

Make sure to check out the documentation on routing. Pay special attention to the part about action request(s).
In this example, I want to call a controller method via ajax on page load.
MyPluginController.php
...

/**
 * Checks what the current status is RIGHT. NOW.
 *
 * @throws HttpException
 *
 */
public function actionCheckStatus()
{
    $this->requireAjaxRequest();

    $response = [
        'status' => 'open'
    ];

    $this->returnJson($response);
}

...

jquery
$.ajax({
    'type': 'post',
    'contentType': 'application/x-www-form-urlencoded; charset=UTF-8',
    'cache': false,
    'data': data,
    'url': '/actions/pluginHandle/checkStatus',
    'dataType': 'json',
    'timeout': 50000
}).done(function (response) {
    // Success
}).fail(function (error) {
   // Total fail.
});

The key part to note is the url attribute in the ajax request. It is prepended with 'actions'. As you will note in the docs you can change 'actions' to whatever you want.


---

### Answer by username_1 on 2018-06-01. Score: 2

For Craft 3:
public function actionCheckStatus()
{
    $this->requireAcceptsJson();

    $response = [
        'status' => 'open'
    ];

    return $this->asJson($response);
}


---

