Kako poslati AJAX zahtjev iz WordPress-a?

Kada radimo plugin u WordPress-u i kada želimo raditi nešto kompliciranije stvari, potrebna nam je i komunikacija sa serverom. U WordPress-u to radimo preko ‘/wp-admin/admin-ajax.php’ ulazne točke/entrypointa. Ukoliko koristimo WP pod ‘podrutom’, možemo koristiti ‘admin_url’ funkciju da dobijemo URL.

admin_url( 'admin-ajax.php' );

Bitne stvari

Kada pravimo hook callback funkciju, bitno je znati da imamo dva hook eventa, ‘wp_ajax_’ i ‘wp_ajax_nopriv_’ za korisnike koji nisu prijavljeni. Isto tako, bitno je da nastavak stringa od ‘wp_ajax_’ i ‘wp_ajax_nopriv_’ bude poslan kao ‘action’ formdata ključ. Što znaći da ako imamo ‘wp_ajax_my_data’ hook naziv, moramo poslati ‘action’:’my_data’ formdata.

Fećnem ti formdatu

Podatke pakiramo u FormData objekt i šaljemo sa JS fetch funkcijom:

const postData = new FormData();  
postData.append('action', 'dsijak_ajax_example');
postData.append('data', 'HELLOWORLD');

fetch('/wp-admin/admin-ajax.php', {
  method: 'POST',
  body: postData,
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});	

Entrypoint funkcija

U povratnoj funkciji poslane podatke preuzimamo sa ‘$_POST’ array-om a možemo i odrediti tip datoteke koji želimo vratiti. Ono što moramo na kraju napraviti je zatvoriti odgovor sa ‘wp_die()’ funkcijom.

function dsijak_ajaxHandler() {
   	header('Content-type:application/json;charset=utf-8');	
	$data = $_POST['data'];
	echo json_encode(['hello'=> $data]);  
	
	wp_die();    
}

Plugin

Idemo napraviti datoteku ‘wp-content/plugins/dsijak-ajax-example/dsijak-ajax-example.php’ sa sadržajem:

<?php
/**
 * Plugin Name: dsijak-ajax-example
 * Plugin URI: https://blog.ioox.studio
 * Description: Site extras checkout
 * Version: 0.1
 * Text Domain: dsijak-ajax-example
 * Author: Damir Sijakovic
 * Author URI: https://blog.ioox.studio
 */

add_action( 'wp_ajax_nopriv_dsijak_ajax_example', 'dsijak_ajaxHandler' );
add_action( 'wp_ajax_dsijak_ajax_example', 'dsijak_ajaxHandler' );
function dsijak_ajaxHandler() {
   	header('Content-type:application/json;charset=utf-8');	
	$data = $_POST['data'];
	echo json_encode(['hello'=> $data]);  
	
	wp_die();    
}

add_action( 'wp_footer', 'dsijak_ajaxSend' );
function dsijak_ajaxSend() 
{
	$entryPoint = admin_url('admin-ajax.php');
	
	print "
	<script> 
		const postData = new FormData();  
		postData.append('action', 'dsijak_ajax_example');
		postData.append('data', 'HELLOWORLD');

		fetch('$entryPoint', {
		  method: 'POST',
		  body: postData,
		})
		.then(response => response.json())
		.then(data => {
		  console.log('Success:', data);
		})
		.catch((error) => {
		  console.error('Error:', error);
		});	
	</script>
	";	
   
}

Odgovor možemo vidjeti u Developer Tools konzoli (F12).

NAPOMENA: Ako imate problema sa duplim kosim crtama “//”, ubacite podatke u base64 pa ih dekodirajte na serveru.