javascript ajax调用后更新图片
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26125846/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
update image after ajax call
提问by Nebojsa Sapic
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.
单击时，我使用 ajax 旋转图像并保存新图像。一切都没有页面刷新。问题是旧图像不会刷新并放置新的刷新图像。
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.
我的问题是如何在不刷新页面的情况下从文件夹更新 img？只有在点击类 slika-rotiraj 之后。
HTML :
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) {
}
});
});
回答by David
Do you mean that the image has changed server-sideand you just want to force the imgtag to fetch the new state of the image? Simply setting the srcshould accomplish that:
您的意思是图像已在服务器端更改，而您只想强制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);
}
If this isn't refreshing the image, you might add a "cache-breaker" to force it to re-request. Something as simple as this:
如果这不能刷新图像，您可以添加一个“缓存破坏者”来强制它重新请求。像这样简单的事情：
success: function(data) {
$(slika2).attr('src', slika + '?' + new Date().getTime());
}
This wouldn't affect anything, it would just innocuously change the URL and force the browser to re-request from the server.
这不会影响任何事情，它只会无害地更改 URL 并强制浏览器从服务器重新请求。
回答by thiag0
Give your tag an id and set the value of the 'src' attribute inside your success function of the ajax call.
为您的标签提供一个 id 并在 ajax 调用的成功函数中设置“src”属性的值。
HTML
HTML
<div class="slika">
<div class="slika-obrisi"></div>
<div class="slika-rotiraj"></div>
<img id="myimage" src="uploads/87b6f334f30717343acd69f3962142a0_542ad975e424d.jpg" />
</div>
JS:
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);
}
});
});
回答by Ragnar
Try something like this if the image has always the same name:
如果图像始终具有相同的名称，请尝试以下操作：
$('.slika img').attr('src', 'new path to image');
otherwise:
否则：
$('.slika img').attr('src', 'new path to image' + '?_=' + new Date().getTime());
