Basisopstelling voor een AJAX load event
HTML Code
html
<div class="pure-g">
<div class="pure-u-1-4">
<button id="ajax_trigger">Klik hier!</button>
<span id="ajax_placeholder">Gladior</span>
</div>
<div class="pure-u-3-4">
<div id="ajax_response"></div>
</div>
</div>PHP Code
php
/**
* Nieuwe AJAX load request aanmaken
*/
// Stap 1: Registreer je script file, waarop je de AJAX actie wilt uitvoeren
function gladior_enqueue_ajax_script()
{
// Enqueue the JavaScript file on the frontend.
wp_enqueue_script(
'gladior_ajax_script_handle', // Handle for the script.
get_template_directory_uri() . '/scripts/the_ajax_script.js', // Path to the script file.
);
// Localize script to pass the AJAX URL to JavaScript
wp_localize_script('gladior_ajax_script_handle', 'the_ajax_object', [
'ajax_url' => admin_url('admin-ajax.php'),
'_nonce_to_verify' => wp_create_nonce('_nonce_to_verify'),
]);
}
// Hook the function to the 'wp_enqueue_scripts' action.
add_action('wp_enqueue_scripts', 'gladior_enqueue_ajax_script');
function function_to_execute()
{
$data = json_decode(file_get_contents('php://input'));
wp_verify_nonce($data->_nonce_to_verify, '_nonce_to_verify') || wp_die("Invalid nonce " . $data->_nonce_to_verify);
$content = $data->content ? $data->content : 'No content provided';
wp_send_json_success(array(
'output_content' => $content,
'data' => $data,
));
}
add_action('wp_ajax_function_to_execute', 'function_to_execute');
add_action('wp_ajax_nopriv_function_to_execute', 'function_to_execute');JAVASCRIPT Code
javascript
async function gladior_ajax_request_function(body) {
body.base_url = window.location.href.replace(RegExp("page/[0-9]/"), "");
try {
const response = await fetch(
`${the_ajax_object.ajax_url}?action=function_to_execute`,
{
method: "POST",
body: JSON.stringify({
_nonce_to_verify: the_ajax_object._nonce_to_verify,
...body
}),
}
);
const data = await response.json();
return data.data;
} catch (error) {
return error;
}
}
document.addEventListener("DOMContentLoaded", async function () {
const placeholder = document.getElementById("ajax_placeholder");
const outputContainer = document.getElementById("ajax_response");
if (!outputContainer) return;
// Functie om de content te updaten (beide keuzes nodig)
// maak een async functie updateTheContent met een integer parameter
async function updateTheContent(variable = placeholder?.innerHTML) {
// Toon loading animatie
outputContainer.innerHTML = "Loading...";
const res = await gladior_ajax_request_function({
_nonce_to_verify: the_ajax_object._nonce_to_verify,
content: variable,
});
if (outputContainer && res.output_content) {
outputContainer.innerHTML = res.output_content;
}
}
// Als je al een initiële update wilt doen.
await updateTheContent();
// Voeg het updateTheContent toe aan alle navigatie items
const trigger = document.getElementById("ajax_trigger");
trigger.addEventListener("click", async () => {
await updateTheContent();
});
});In je .function.php plak je de content van de PHP snippet. Maak een .js file aan: /scripts/the_ajax_script.js en plak hierin de content van de JavaScript snippet.Bekijk Snippet