覆盖ajax响应中的缓存图像

I have an ajax response that is returning images that are cached. I can bust this cache with a random number generator, but having an issue applying it correctly to the returned URI.

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

The cached image has a URI coming from the response represented by "obj.entity.entries[property].uri" that looks like this: http://xx.domain.com/api/v2/img/5550fdfe60b27c50d1def72d?location=SQUARE

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

The newly uploaded image needs to have the random number applied to it, so that it is appended to the end of the URI, right before the ?, like so: http://xx.domain.com/api/v2/img/5550fdfe60b27c50d1def72d+6?location=SQUARE, where +6 is the randomly generated number.

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

I believe the best approach is to use a regex to look for the end of the URI before the ? and apply the var storing the random number, then reapply this new URI to the response. I have the following worked out, but not sure how to apply the regex correctly:

我相信最好的方法是使用正则表达式来查找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");
    });
});

2 个解决方案

#1

You don't need to add your random digits to the file path part of the URL, just append to the URL parameters instead, that is enough to prevent caching.

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

For example use:

例如使用:

img/5550fdfe60b27c50d1def72d?location=SQUARE&6

Where the 6 is your randomly generated value.

6是你随机生成的值。

Also, be aware that a randomly generated number might not be the best choice here, since it might be undesirably duplicated. Consider using a hash or timestamp instead of a purely random number.

此外,请注意,随机生成的数字可能不是此处的最佳选择,因为它可能会被不合需要地重复。考虑使用散列或时间戳而不是纯随机数。

#2

The solution ended up being fairly simple:

解决方案最终变得相当简单:

I set var imageCacheBust = Math.random(); and then used it in the returned URI like so: var imageURI = obj.entity.entries[property].uri + "?" + imageCacheBust;

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

#1