> For the complete documentation index, see [llms.txt](https://wplake.gitbook.io/advanced-views/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wplake.gitbook.io/advanced-views/layouts/component-options/ajax-actions.md).

# Layout Ajax actions

In Advanced Views, every [*Layout*](/advanced-views/getting-started/first-layout.md) is a smart entity, natively supporting the [WordPress Ajax](https://developer.wordpress.org/reference/hooks/wp_ajax_action/).

It enables you to create components that can send data and/or update themselves in the background without refreshing the page.

#### Server side:

To use this feature, we override the  `get_ajax_response()` method inside the [Layout Controller](/advanced-views/layouts/code-fields/layout-controller.md) instance. The return value should be an array, which will be passed as `JSON` to the client.

Within the callback, you can use any WordPress functions. Furthermore, you can [employ PHP-DI](/advanced-views/post-selections/code-fields/selection-controller.md) to get direct access to your theme classes.

#### Client side:

On the client side, as usual, we send requests to the `admin-ajax.php` file.

## 1. Rest Api vs. Ajax

Not sure about the difference between WordPress Ajax and REST API? 

**In most cases, we recommend using the REST API**. It is much faster compared to the traditional `admin-ajax.php` requests, as it skips loading unnecessary WordPress parts - while still making all necessary WordPress functions available - as it is called during the WordPress `init` action.

If you need to work with authorized users, Ajax may be the simpler option, as it respects the auth cookie within requests; therefore, it doesn't require Request Authentication parts.

## 2. Layout Ajax example

#### JavaScript code

Incorporate the following function into your [*Layout's* JavaScript code](/advanced-views/layouts/code-fields/javascript-code.md):

```javascript
async function makeAjax() {
    let response = await fetch('/wp-admin/admin-ajax.php', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
        },
        body: new URLSearchParams({
            'action': 'advanced_views',
            // todo put your Layout ID 
            '_layout-id': '6630e2da1953e', // you can learn ID from the shortcode
            // todo your args here
            'myArg': 'myvalue',
        }).toString(),
    });

    let responseText = await response.text();
    let json = {};

    try {
        json = JSON.parse(responseText);
    } catch (e) {
        console.log("Error parsing JSON", responseText);
        return;
    }

    console.log('ajax complete', json);
}
```

#### *Layout* Controller code

Incorporate the following function into your [Layout Controller](/advanced-views/layouts/code-fields/layout-controller.md): 

```php
<?php

declare( strict_types=1 );

use Org\Wplake\Advanced_Views\Bridge\Controllers\Layout\Layout_Controller_Base;

return new class extends Layout_Controller_Base {
	public function get_ajax_response(): array {
		$myArg = sanitize_text_field( $_POST['myArg'] ?? '' );

		// todo your logic here
		// additionally, you can use $this->get_container()
		// to get PHP-DI instance and access to any of your theme classes

		return [
			'my_response' => 'Thank you for the feedback!',
		];
	}
};

```