Question

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

缓存图像的URI来自“ obj.entity.entries [property] .uri ”所代表的响应，如下所示： http://xx.domain.com/api/v2/img/5550fdfe60b27c50d1def72d?location=SQUARE

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

我认为最好的方法是使用正则表达式在?之前查找URI的结尾并应用存储随机数的var，然后将此新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;

覆盖ajax响应中的缓存图像

2 个答案: