WP Rest API example

action-via-rest-api.php

<?php 

// Register a new route
add_action( 'rest_api_init', function () {
    register_rest_route( 'portal/v1', '/messages/favourite/toggle', array(
        'methods' => 'POST',
        'callback' => 'change_favorite_status_of_a_message',
    ) );
} );

function change_favorite_status_of_a_message( $data ) {

    $message_id = $data->get_param('id');
    $state = $data->get_param('state');

    // Get instance of goTandem API
    $gt = BbGoTandem::get_instance();

    // Update the favorite status of a message
    $result = $gt->update_message( $message_id, [ 'favorite' => $state ] );

    return $result;

}

javascript.js

(function($) {

	$(".favorite-icon").on("click", function() {

		$.ajax( {
			url: wpApiSettings.root + 'portal/v1/messages/favourite/toggle',
			method: 'POST',
			beforeSend: function ( xhr ) {
				xhr.setRequestHeader( 'X-WP-Nonce', wpApiSettings.nonce );
			},
			data:{
				'id': $(this).data("msgid"),
				'state': $(this).data("state"),
			}
		} ).done( function ( response ) {
			// console.log( response );
		} );

	});

})( jQuery );

scripts.php

<?php 

wp_enqueue_script( 'wp_rest_js', plugins_url( 'javascript.js', __FILE__ ) , array('jquery'), '1.0.0', true );

view.php

<!-- Link that triggers the WP Rest API call -->
<a class="favorite-icon" data-msgid="<?= $message_id ?>" data-state="<?= $favorite_value ?>" href="#">
    <i aria-hidden="true" class="fa <?= $star_class; ?>"></i>
</a>

<?php wp_localize_script( 'wp_rest_js', 'wpApiSettings', array( 'root' => esc_url_raw( rest_url() ), 'nonce' => wp_create_nonce( 'wp_rest' ) ) ); ?>