آجاکس کردن سیستم لایک و دیسلایک

سلام دوستان خسته نباشید.برای سیستم وردپرس یک سیستم لایک توسط یکی از اساتید نوشته شده بود که به این صورت بود که یک مطلب رو لایک می کردیم یه عدد چاپ می کرد و یه دیسلایک که اون عدد رو کم می کرد.من تغییرش دادم و اینکارو کردم که لایک یه عدد جدا و دیسلایک هم یک عدد جدا چاپ کنه.مشکل اصلی اینجاست لایک و دیسلایک آجاکس نیست و صفحه رفرش می شه.من جی کوئری ضعیفه دوستان می تونن کمک کنن؟!

کد جی کوئری :

کد HTML:

---

<script type="text/javascript">$(document).ready(function() {$(".like-button").click(function() {var v = $(this).val();$(this).nextAll("#like-button").val(v).parent("form").submit();});});</script>

---

کد اکشن :

کد HTML:

---

<?phpif(isset($_POST['like_button'])) {$likes_count = get_post_meta($post->ID, 'likes_count', true);$dislikes_count = get_post_meta($post->ID, 'dislikes_count', true);$like = $_POST['like_button'];$dislike = $_POST['like_button'];if($like == 'like') {$likes_count = $likes_count+1;}if($dislike == 'dislike') {$dislikes_count = $dislikes_count-1;}update_post_meta($post->ID, 'likes_count', $likes_count);update_post_meta($post->ID, 'dislikes_count', $dislikes_count);}?>

---

کد فرم:

کد HTML:

---

<form method="post" action="#likesForm" id="likesForm"><?php$likes_count = get_post_meta($post->ID, 'likes_count', true);$dislikes_count = get_post_meta($post->ID, 'dislikes_count', true);?><button type="button" value="dislike" class="like-button" id="dislike"><?php echo $dislikes_count;?> dislike</button><button type="button" value="like" class="like-button" id="like"><?php echo $likes_count;?> like</button><input type="hidden" id="like-button" name="like_button" value=""></form>

---