Skip to content

Instantly share code, notes, and snippets.

@AbmSourav

AbmSourav/script.js

Last active Mar 15, 2021
Embed
What would you like to do?
WordPress ajax call with Fetch API
// php file
function enqueue_scripts() {
wp_enqueue_script( 'public-js', plugin_dir_url( __FILE__ ) . 'js/script.js', array(), '1.0', true );
wp_localize_script( 'public-js', 'localizeObj',
[
'ajax_url' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'prefix_public_nonce' ),
]
);
}
function load_more_posts() {
$security = check_ajax_referer( 'prefix_public_nonce', 'security' );
if ( false == $security ) {
return;
}
// post query, loop...
}
add_action('wp_ajax_load_more_posts', 'load_more_posts' );
add_action('wp_ajax_nopriv_load_more_posts', 'load_more_posts' );
// script.js file
const target_div = document.querySelector('.posts');
const bodyParams = {
action: 'action=load_more_posts',
nonce: '&security=' + localizeObj.nonce,
}
fetch(localizeObj.ajax_url, {
method:"post",
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: bodyParams.action + bodyParams.nonce
})
.then(function(res) {
return res.text();
})
.then(function(data) {
// console.log(data);
const parser = new DOMParser();
const items = parser.parseFromString(data, 'text/html');
const postItems = items.querySelectorAll('.items');
postItems.forEach(function(postItem) {
target_div.append(postItem);
});
})
.catch(function (error) {
console.log(error.message);
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment