How to refresh with ajax in php? - php

Question

I'm trying to make a likes/claps/heart system on my site and found this site (https://www.techolac.com/wordpress/how-to-add-likes-to-posts-in-wordpress-without-a-plugin/) that taught how to do it. I made some adjustments the problem is that when I do like the page refresh and I just wanted the number to refresh and not the whole page.
I saw what I could do in AJAX but i didnt know how.
Functions.php / Wordpress
// Add buttons to top of post content
function ip_post_likes($content) {
ob_start();
?>
<a href="<?php echo add_query_arg('post_action', 'like'); ?>">
<span class="icon-claps pr-2"><?php echo get_like_count('likes') ?></span>
</a>
<?php
$output = ob_get_clean();
return $output . $content;
}
add_filter('the_content', 'ip_post_likes');
//Get like
function get_like_count($type = 'likes') {
$current_count = get_post_meta(get_the_id(), $type, true);
return ($current_count ? $current_count : '');
}
//Process like
function ip_process_like() {
$processed_like = false;
$redirect = false;
// Check if like
if(is_singular('post')) {
if(isset($_GET['post_action'])) {
if($_GET['post_action'] == 'like') {
// Like
$like_count = get_post_meta(get_the_id(), 'likes', true);
if($like_count) {
$like_count = $like_count + 1;
}else {
$like_count = 0;
}
$processed_like = update_post_meta(get_the_id(), 'likes', $like_count);
}
if($processed_like) {
$redirect = get_the_permalink();
}
}
}
// Redirect
if($redirect) {
wp_redirect($redirect);
die;
}
}
add_action('template_redirect', 'ip_process_like');
The problem is that when I do like the page refresh and I just wanted the number to refresh and not the whole page.
I saw what I could do in AJAX but i didnt know how.

Answer 1

Image:
This is the whole code. I am using wordpres and twig / timber