I was recently trying to look up a reference on the format Wordpress’s admin-ajax.php interface expects and realized to my horror that the Wordpress codex guide was last updated in, like, 2012 and that most of the answers to questions on Stack Overflow are at least ten years old. A lot has changed in the development landscape since then! For one thing, in the official Wordpress codex guide, it uses jQuery for the whole thing, when jQuery has fallen out of favor over vanilla Javascript, among other things. Modern JavaScript also has a much wider toolset, including the Fetch API.

So, I wanted to make note of how you use the admin-ajax.php interface with something like Fetch, in case anyone else wants to check their work.

const ajaxFn = async () => { 														# you need the async keyword to use the "await" call inside
	const req = await fetch('/wp-admin/admin-ajax.php', { # this is always the admin-ajax url
		method: 'POST', 																		# it can also be GET if you want, I guess
		body: JSON.stringify({ 															# javascript object containing all the data
			action: 'your_action_name', 											# this should match the backend hook used to handle the script
			... 																							# any other data goes here
		}),
		headers: {
			"Content-Type": 'application/json', 							# tells the server that the data should be interpreted as JSON
		}
	});
	const resp = await req.json();												# can also be req.blob(), req.text(), etc. based on whatever format you're expecting data in
	if (resp) {																						# conditional for whatever you're expecting
		# do something
	}
}

Fetch is a pretty similar replacement for the familiar $.ajax/$.post/$.get calls in jQuery; the main difference is that it doesn’t define a callback as part of its structure, and the property referred to as ‘data’ in jQuery is called ‘body’ here and needs to be passed as a string.

In this case, we’re using the await keyword to tell the script to wait while an asynchronous function finishes running and only then continue, making the asychronous… synchronous. Otherwise, fetch returns a promise rather than a response object.

On the backend, then, what you need to do in either functions.php or a file included in functions.php is:

add_action('wp_ajax_your_action_name', 'function_name');
add_action('wp_ajax_nopriv_your_action_name', 'function_name');

function function_name () {
	// handler goes here
	echo "whatever your response is";
	die();
}

The two actions are respectively handlers for when it’s involked under a logged-in and not-logged-in user. If you want to have a different behavior for a registered user versus a guest, you might actually use different handlers in the second argument!

The action name should match whatever action name you passed as the action parameter in your Fetch call; the function name just needs the name of the backend handler function you want to call for the action. That handler function should echo/print some data, then die() to close the connection; the value of resp in the Javascript block above will be whatever you echoed or printed within function_name.