如何通过Javascript更新数据库，然后重新加载

Question

So, I'm making a website similar to FML and others, where people can post things and others can like/dislike and comment.

Right now, I have it so when somoene clicks "like", it's a link that calls "/like/(post id)", which calls a function that increments the database, then reloads the page.

I'd like to find a way to do this without having to do that. A friend said to try ajax or javascript, but i'm completely uneducated in them.

Does anyone have any pointers?

Answer 1

I don't want to explain an AJAX request in its entirety, but this should point you in the right direction. Instead of reloading the page, have /like/ return the number of likes. Then have the number in a selectable element, like

<a id="postid" href="#" onclick="like(this);return false;" class="likebtn">Like</a>
<span id="postid-likes">0</span>

Then make the javascript function

<script>
function like(element) {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            document.getElementById(element.id+"-likes").innerHTML=xmlhttp.responseText;
        }
    }
xmlhttp.open("GET","/like/"+element.id,true);
xmlhttp.send();
}
</script>