This is a quick template that I repeatedly use while working with AJAX in WordPress.
In .js
$('body').on('click', '.some_element_class', function (e) {
e.preventDefault();
var ajaxdata = {};
//Data that you're sending
ajaxdata.somedata = 'somedata';
ajaxdata.action = 'your_action_name';
$.ajax({
beforeSend: function () {
//some work before sending data
},
type: 'POST',
dataType: 'json',
url: ajaxscript.ajax_url, //ajax url
data: ajaxdata,
success: function (data) {
// some work after ajax success
},
complete: function () {
// some work after ajax complete
}
});
});
In .php
$ajax_events = array(
'your_action_name' => 'your_function_to_call',
);
foreach ( $ajax_events as $ajax_event => $function ) {
add_action( 'wp_ajax_' . $ajax_event, $function );
add_action( 'wp_ajax_nopriv_' . $ajax_event, $function );
}
// Function ajax calls
function your_function_call() {
if ( isset( $_POST['action'] ) && 'your_action_name' !== $_POST['action'] ) {
return;
}
// Do what you want to do
// return back with json data
echo wp_json_encode(
array(
'status' => 'good',
'msg' => __( 'Working Fine.', 'your_work_space' ),
)
);
exit;
}
Quick Way of using AJAX in WordPress