I don't want my php page to refresh after function executes

Question

I got function that collects and display's all posts, and for each have upvote/downvote buttons.

On button click I call function called upvotePost and downvotePost.

It all works fine, but it refreshes page, I want to understand how to make it not-refresh page.

I know it's done by ajax/jquery, but don't understand how to make it.

My button example:

<a href="fun.php?upvote-btn=true?action=select&image_id=<?php echo $post['id'];?>">

Function calling:

if(isset($_GET['upvote-btn'])){
    $fun->upvotePost();     
}

And my function:

    public function upvotePost(){
    try
    {

        if(isset($_SESSION['user_session'])){
            $user_id = $_SESSION['user_session'];

            $stmt = $this->runQuery("SELECT * FROM users WHERE id=:id");
            $stmt->execute(array(":id"=>$user_id));

            $myRow=$stmt->fetch(PDO::FETCH_ASSOC);

        }else{
            $_SESSION["error"]='Sorry, You have to login in you account!';
        }

        $id = $_GET['image_id'];                    
        $user_id = $myRow['id'];

        $stmt2 = $this->conn->prepare("SELECT count(*) FROM fun_post_upvotes WHERE image_id=('$id') AND user_id=('$user_id')");
        $stmt2->execute();
        $result2 = $stmt2->fetchColumn();

        if($result2 == 0){

            $stmt3 = $this->conn->prepare("INSERT INTO fun_post_upvotes (image_id,user_id) VALUES(:image_id,:user_id)");

            $stmt3->bindparam(":image_id", $id);
            $stmt3->bindparam(":user_id", $user_id);

            $stmt3->execute();  

            $stmt4 = $this->conn->prepare("SELECT * FROM fun_posts WHERE id=('$id')");
            $stmt4->execute();
            $result4 = $stmt4->fetchAll();

            foreach($result4 as $post){
                $newUpvotes = $post['upvotes']+1;

                $stmt5 = $this->conn->prepare("UPDATE fun_posts SET upvotes=$newUpvotes WHERE id=('$id')");                                                                                         
                $stmt5->execute();

                $_SESSION["result"]='You have succesfully liked this post!';

            }
            }else{

            $_SESSION["error"]='You have already liked this post!';

            }

            $stmt6 = $this->conn->prepare("SELECT count(*) FROM fun_post_downvotes WHERE image_id=('$id') AND user_id=('$user_id')");
            $stmt6->execute();
            $result6 = $stmt6->fetchColumn();

            if($result6 > 0){
                $stmt7 = $this->conn->prepare("DELETE FROM fun_post_downvotes WHERE image_id=('$id') AND user_id=('$user_id')");
                $stmt7->execute();

                $stmt8 = $this->conn->prepare("SELECT * FROM fun_posts WHERE id=('$id')");
                $stmt8->execute();
                $result8 = $stmt8->fetchAll();

                foreach($result8 as $post){

                    $newDownvotes = $post['downvotes'] - 1;

                    $stmt9 = $this->conn->prepare("UPDATE fun_posts SET downvotes=$newDownvotes WHERE id=('$id')");                                                                                         
                    $stmt9->execute();

                }
            }
    }
    catch(PDOException $e)
    {
        echo $e->getMessage();
    }               
}

Answer 1

Basically you have to create a php file which will route the call(let's call it a controller) to the intended function. Then create an ajax function which will hit that controller. Have a look at Ajax Intro Or look at the Jquery Implementation

Answer 2

Ajax is the perfect answer for your question. Please check out this. you may need to alter this snippet according to your requirement.

before doing this you should import jquery.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">

your upvote button should be like this,

<button id="upvote"> upvote </button>

add below snippet in your javascript section.

$(function(){

  $("#upvote").click(function(){
    $.ajax(
      { url: "fun.php?upvote-btn=true?action=select&image_id=<?php echo $post['id'];?>", 
        type: "get",
        success: function(result){
                   // todo something you need to perform after ajax call
                }
      });
  });


});