ajax調用后更新圖像

Question

我有一些問題。

點擊我用ajax旋轉圖像並保存新圖像。 一切都沒有頁面刷新。 問題是舊圖像不會刷新並刷新新圖像。

此外，新圖像與舊圖像具有相同的名稱。

題

我的問題是如何在沒有頁面刷新的情況下從文件夾更新img？ 只有在點擊類slika-rotiraj之后。

HTML：

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

腳本：

$(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

你的意思是圖像已經改變了服務器端 ，你只是想強制img標簽來獲取圖像的新狀態？ 只需設置src可以實現：

success: function(data) {
    // which is your image?  "slika2"?
    // it's not really obvious, so I'll assume that for now
    $(slika2).attr('src', slika);
}

如果這不刷新圖像，您可以添加“緩存破壞程序”以強制它重新請求。 像這樣簡單：

success: function(data) {
    $(slika2).attr('src', slika + '?' + new Date().getTime());
}

這不會影響任何事情，它只是無害地更改URL並強制瀏覽器從服務器重新請求。

Answer 2

為您的標記指定一個id，並在ajax調用的success函數中設置'src'屬性的值。

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);
        }
    });
});

Answer 3

如果圖像始終具有相同的名稱，請嘗試這樣的操作：

$('.slika img').attr('src', 'new path to image');

除此以外：

$('.slika img').attr('src', 'new path to image' + '?_=' + new Date().getTime());