Anchor tag update div without page reload

Question

I have this div which includes an anchor tag that loads a php script that essentially adds information to a database and returns back to this page. I want to use this achor tag to run that php script update the database and refresh this div without reloading the page. The php script need those two variables title and vote which used with the php $_GET[] function. Can this be done, and if so how? I have searched everywhere and no script seems to work. Will provide more information if needed. Thanks so much will give credit to everyone who helps.

      <div class='like_box'>
                <a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
                <p style='color: #fff;'>$like_username</p>
      </div>

I've tried something like this

        <script>
           $('a.counter').click( function(e) {
              e.preventDefault();
              vote.php?vote=like&title=$title
           });
        </script>

Answer 1

Use this:

 <div class='like_box'>
                <a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
                <p class="vote_text1" style='color: #fff;'>$like_username</p>
      </div>

In the javascript side (jquery)

$(".like_box a").click(function(event){
        event.preventDefault();
        $.ajax({
    url: 'vote.php?vote=like&title=$title', 
    success: function(result){
            // update $like_num and $like_username here
            // if you do not have them binded use this
            $('.like_box p.vote_text').text('<value from result>');
            $('.like_box p.vote_text1').text('<value from result>');
        }});
    });