javascript - 重新加载页面以反射(reflect)更改

Question

我有我的 jquery 代码

.ajax({
            type: "POST",
            url: "crop/crop.php",
            data: dataString,
            cache: false,
            success: function(data){
                $('#popupMargin').hide();
                $('#avatar img').remove();
                $('#avatar').load('crop/dp.php');
                //$('#avatar').hide();

            }
        });

现在

//Codes in the file loaded (`dp.php`) called by jQuery above

    <?php session_start(); ?>
    <!-- To display display picture just after croppping -->
    <img src="users/<?php echo $_SESSION['userId']; ?>/img/dp.jpg" width="150">

每当我单击按钮#btn时，就会调用上面的ajax。文件 crop.php 裁剪图像并将其保存在与上面 dp.php 中相同的位置和相同的名称。

这意味着，每次用户单击按钮#btn时，图像都会发生变化。我希望更改反射(reflect)为上面的 jQuery 代码中调用的 $('#avatar').load('crop/dp.php'); ；但是，我不确定旧图像是否仍然显示是某种缓存。

.load() 是否重新加载页面？如何确保显示更改(更新的图像)而不是旧的？

Answer 1

如果您担心缓存，可以将时间戳作为 GET 参数附加到 ajax 请求中。这通常会强制浏览器下载新的副本。

 $('#avatar').load('crop/dp.php?' + (new Date().getTime()));

此外，如果 $_SESSION['userId'] 在请求之间保持相同，那么强制重新加载实际的 jpg 也不会有什么坏处。

<img src="users/<?php echo $_SESSION['userId']; ?>/img/dp.jpg?<?php echo time(); ?>" width="150">

希望有帮助。