Ajax调用后更新图像

Question

I have some problems.

On click I rotate image with ajax and save new image. Everything is without page refresh. And problem is that old image won't refresh and put new refreshed image.

Also new image have same name like the old one.

QUESTION

My question is how to update img from folder without page refresh? Only after click class slika-rotiraj.

HTML :

<div class="slika">
    <div class="slika-obrisi"></div>
    <div class="slika-rotiraj"></div>
    <img src="uploads/87b6f334f30717343acd69f3962142a0_542ad975e424d.jpg" />
</div>

SCRIPT :

$(document).on("click", ".slika-rotiraj", function() {
    var slika = $(this).next("img").attr("src");
    var slika1 = $(this).parent();
    var slika2 = $(this).next("img");
    $(this).next("img").attr("src", slika);
    $.ajax({
        type: "POST",
        url: "rotiraj.php",
        data: {
            slika: slika
        },
        success: function(data) {

        }
    });
});

Answer 1

Give your tag an id and set the value of the 'src' attribute inside your success function of the ajax call.

HTML

<div class="slika">
    <div class="slika-obrisi"></div>
    <div class="slika-rotiraj"></div>
    <img id="myimage" src="uploads/87b6f334f30717343acd69f3962142a0_542ad975e424d.jpg" />
</div>

JS:

$(document).on("click", ".slika-rotiraj", function() {
    var slika = $(this).next("img").attr("src");
    var slika1 = $(this).parent();
    var slika2 = $(this).next("img");
    $(this).next("img").attr("src", slika);
    $.ajax({
        type: "POST",
        url: "rotiraj.php",
        data: {
            slika: slika
        },
        success: function(data) {
            $("#myimage").attr('src', data);
        }
    });
});