DS Log

In my blog, I delve into the world of programming web technologies, Linux, Unix-like, and graphic design using free tools on Linux.

Monday, July 8, 2024

How to send an AJAX request from WordPress?

When developing a plugin in WordPress and when we want to do something more complex, we also need communication with the server. In WordPress, we do this through the '/wp-admin/admin-ajax.php' entry point. If we are using WP in a 'subdirectory', we can use the 'admin_url' function to obtain the URL.

 admin_url( 'admin-ajax.php' ); 

Important stuff

When creating a hook callback function, it's important to know that we have two hook events, 'wp_ajax_' and 'wp_ajax_nopriv_', for users who are not logged in. It's also important to note that the string ending of 'wp_ajax_' and 'wp_ajax_nopriv_' should be sent as the 'action' formdata key. This means that if we have a hook name 'wp_ajax_my_data', we need to send 'action:my_data' as formdata.

Fetching formdata

We package the data in a FormData object and send it with the JS fetch function:

 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 function

In the callback function, we retrieve the submitted data with the '$_POST' array and we can also specify the type of file we want to return. At the end, we need to close the response with the 'wp_die()' function.

Note: '$_POST' is used for handling form data, while '$_FILES' is used for handling file uploads. The 'wp_die()' function is used to send a HTTP response code and an error message to the client, and it should be used to close the response in this context.

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

Plugin

Let's create a file 'wp-content/plugins/dsijak-ajax-example/dsijak-ajax-example.php' with the following content:

<?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 "
    
    ";    
   
}

We can see the response in the Developer Tools console (F12).

NOTE: If you have a problem with double slashes "//", encode the data in base64 and decode it on the server.

Labels: php, wordpress

posted by damirs @ July 08, 2024