How to set ajax for register_rest_route function and WP_REST_Controller class?

The WordPress REST API allows developers to create custom routes and endpoints to access data and perform actions on a WordPress site. One way to create custom routes and endpoints is by using the “register_rest_route” function and the WP_REST_Controller class. However, when working with AJAX, it’s important to make sure that the custom routes and endpoints are set up correctly to handle AJAX requests. In this article, we will go over the steps to set up AJAX for custom routes and endpoints created using the “register_rest_route” function and the WP_REST_Controller class.

The first step in setting up AJAX for custom routes and endpoints is to create a custom route using the “register_rest_route” function. This function is used to register a new route for the WordPress REST API. For example, the following code shows how to register a custom route for the “example” namespace:

Copy coderegister_rest_route( 'example/v1', '/custom-route', array(
    'methods'  => 'GET',
    'callback' => 'example_callback_function',
));

In this example, the custom route is registered with the “example/v1” namespace, the path “/custom-route”, and a callback function “example_callback_function”.

The next step is to create a callback function that will handle the request when the custom route is accessed. This function should be added to the functions.php file of your theme or plugin. The callback function should contain the logic for handling the request, such as retrieving data from the database or performing an action. For example, the following code shows a callback function that retrieves data from the database:

Copy codefunction example_callback_function( $request ) {
    $data = get_data_from_database();
    return rest_ensure_response( $data );
}

In this example, the callback function retrieves data from the database using the “get_data_from_database” function and returns the data as a response using the “rest_ensure_response” function.

The next step is to create a controller class that will handle the request and return the response. The controller class should extend the WP_REST_Controller class, which provides the methods needed to handle requests and return responses. For example, the following code shows a controller class that handles a GET request and retrieves data from the database:

Copy codeclass Example_Controller extends WP_REST_Controller {
    public function get_items( $request ) {
        $data = get_data_from_database();
        return rest_ensure_response( $data );
    }
}

In this example, the controller class defines a “get_items” method that handles a GET request, retrieves data from the database using the “get_data_from_database” function, and returns the data as a response using the “rest_ensure_response” function.

Once the custom routes, callback function and controller class are created, you can use jQuery or javascript AJAX to call the endpoint.

Copy code$.ajax({
        url: ajax_url,
        type: 'GET',
        data: {
            action: 'example_callback_function',
        },
        success: function(response) {
            // Handle the response
        }
    });