How to update data after ajax?

Question

JavaScript

Hello.
Please explain at least theoretically.
I write a regular blog in php, i.e. there is a page where materials are displayed, each material has a rating in the form of a like and dislike button.
For example, I go to an article, click "like", I need it to be written to the database after clicking, that in principle everything works for me, a string is written to the database saying that a user with a certain id likes an article with such an id. Those. everything is good. But the problem is that after clicking I need to update the data, i.e. next to it is the number of likes, but it should increase and, accordingly, a class will be added to the like button so that the button changes color. Well, it’s already like little things, there is a change in color or size, etc.

Simply put, after writing the data to the database, I need to pull out new data and update the information (number of likes) on the page. Well, of course, everything is done through ajax without reloading the page.

I can write, I can't pull out new data -(

Answer 1

When sending via ajax, you receive a response, a success event. Here in it and update. Moreover, you know that when you click +1, it will be exactly +1. So you can find what was and increase by one or decrease even before ajax. Or in success if you want to be sure you signed up.

Answer 2

$.ajax({
    type: "POST",
    url: u_sroot+u_mod+"/page",
    data: 'var1',
    success: function(answer){
        $("#likes_number").html(answer)
    },
    error: function(){}
});

Actually, on answer you get new data from the server and write down a new number using jQuery.
If needed, I can provide more details.

Answer 3

request.onreadystatechange = function() {
    if (request.readyState == 4 && request.status == 200) {
        var response = request.responseText; // В request.responseText ответ сервера.
    }
}