在ajax响应中覆盖缓存的映像

Question

我有一个ajax响应，它返回缓存的图像。我可以使用随机数生成器关闭这个缓存，但是在正确地将它应用到返回的URI时会出现问题。

缓存的映像具有一个URI，它来自由"obj.entity.entriesproperty.uri“表示的响应，如下所示：http://xx.domain.com/api/v2/img/5550fdfe60b27c50d1def72d?location=SQUARE

新上传的图像需要将随机数应用到它，以便将其附加到URI的末尾，就在?前面，比如：http://xx.domain.com/api/v2/img/5550fdfe60b27c50d1def72d+6?location=SQUARE，其中+6是随机生成的数字。

我认为最好的方法是使用regex在?之前查找URI的末尾，并应用存储随机数的变量，然后将这个新URI重新应用到响应中。我已经完成了以下工作，但不确定如何正确地应用正则表达式：

$('.image-search').on('click', function () {
    var root = "http://localhost:7777/proxy/staging/rest/v1/cms/story/id/";
    var encodeID = $("#imageid").val();
    var bearerToken = localStorage.getItem('Authorization');
    var imageCacheBust = Math.floor((Math.random() * 10) + 1);

    //IF TESTING ON LOCALHOST
    if (document.domain == 'localhost') {
        url = root + encodeID + "/images";
    } else {
        //IF IN PRODUCTION
        url = "/cropper/admin/cropv2/rest/v1/cms/story/id/" + encodeID + "/images";
        //GRAB REFERRER URL FOR VIMOND ASSET 
        //SET VALUE SUCCEEDING ASSETS AS ASSET ID
        var regexp = /assets\/(\d+)/;
        var assetid = regexp.exec(window.document.referrer);
        $("#imageid").val(assetid[1]);
    };
    $.ajax({
        url: url,
        method: 'GET',
        headers: {
            "Authorization": bearerToken
        },
    }).then(function (response) {
        var obj = response;
        var regexp = "REGEX HERE";
        var imageURI = regexp.exec(obj.entity.entries[property].uri);
        $("#imageid").css("border-color", "#ccc");
        $(".search-results").empty();
        for (var property in obj.entity.entries) {
            if (obj.entity.entries.hasOwnProperty(property)) {
                $(".search-results").append($("<li><a href='" + imageURI + "' target='_blank'><div class='thumbnail'><img width='30' height='30' src='" + imageURI + "' target='_blank'/></img><div class='caption'><p>" + obj.entity.entries[property].orientation + "</p></div></a></li>"));
            }
        }
    }).fail(function (data) {
        $(".search-results").empty();
        $(".search-results").append("<p class='alert alert-danger'>Invalid ID</p>");
        $("#imageid").css("border-color", "red");
    });
});

Answer 1

您不需要将随机数字添加到URL的文件路径部分，只需追加URL参数即可，这足以防止缓存。

例如，使用：

img/5550fdfe60b27c50d1def72d?location=SQUARE&6

其中6是随机生成的值。

此外，请注意，随机生成的数字可能不是最好的选择，因为它可能是不可取的重复。考虑使用散列或时间戳而不是纯粹的随机数。

Answer 2

最后，解决方案非常简单：

我设置var imageCacheBust = Math.random();，然后在返回的URI中使用它，如下所示：var imageURI = obj.entity.entries[property].uri + "?" + imageCacheBust;