IE 缓存问题正在破坏我的查找字段答案

【问题标题】：IE Caching issue is breaking my lookup fieldIE 缓存问题正在破坏我的查找字段
【发布时间】：2020-10-29 23:50:58
【问题描述】：

我正在做一个项目，它使用 javascript 根据用户在字段中输入的文本（查询每个键位）从视图（用 Python 编写并使用 Django 界面）获取信息，然后显示该信息背部。基本上，这要么显示“未找到工作”，要么显示该工作的名称、用户名和余额。在 Firefox 中，这一切都很好。我可以输入一个 JobID，它告诉我 ID 是新的，我可以创建工作。然后我可以立即返回该页面并输入该 ID，然后我的查找会返回有关该工作的正确信息。

问题是，Internet Explorer 8 很懒惰。如果我在 IE8 中键入作业 ID，我的函数会调用查找页面 (/deposits/orglookup/?q=123) 并获取一个值。因此，例如，如果它变为 False，我就可以使用该 ID 创建一个新工作。如果我随后浏览并在同一个查找字段中输入相同的数字，Internet Explorer 不会刷新查找页面，因此它会再次返回 false。如果我浏览到该查找页面，我会看到该错误值，但如果我刷新它，我会再次获得正确的信息。关于每次我在查找字段中键入时如何强制执行此查询的任何想法，而不是像 IE 那样引用缓存页面？

我要补充一点，在每个用户的基础上修复它对我没有多大好处，因为这是一个组织范围的应用程序，所以我真的可以使用一个修复程序，我可以在某处写入我的代码来强制 IE每次应该刷新查找页面。

如果有帮助，这里是查找函数的代码。有点乱，但不是我写的，所以我会尝试包括所有相关的内容：

$("#id_JobID").keyup( 

    function(event){

        //only fire gets on 0-9, kp 0-9, backspace, and delete
        if (event.keyCode in { 96:1, 97:1, 98:1, 99:1, 100:1, 101:1, 102:1, 103:1, 104:1, 105:1,
                                46:1,48:1, 49:1, 50:1, 51:1, 52:1, 53:1, 54:1, 55:1, 56:1, 57:1, 8:1}) 
        {

            if ($("#loadimg").attr("src") != "/static/icons/loading.gif") {
                $("#loadimg").attr("src", "/static/icons/loading.gif");
            }

            if ($("#loadimg").length < 1) {
                $("#id_JobID").parent().append("<img id=loadimg src=/static/icons/loading.gif>");
            }

            clearTimeouts(null); //clear all existing timeouts to stop any running lookups
            GetCounter++; 
            currLoc = window.location.href.slice(window.location.href.indexOf('?') + 1).split('/').slice(-2,-1);

            if (currLoc == 'restorebatch') {
                var TimeoutId = setTimeout(function() {dynamicSearch('restorelookup');}, 400);
            } else {
                var TimeoutId = setTimeout(function() {dynamicSearch('orglookup');}, 400);
            }

            //alert(TimeoutID);
            TimeoutBag[GetCounter] = {
                'RequestNumber': GetCounter,
                'TimeoutId': TimeoutId
            }
        }
    }
);

function clearTimeouts(TimeoutBagKeys) //TimeoutBagKeys is an array that contains keys into the TimeoutBag of Timeout's you want to clear
{
    if(TimeoutBagKeys == null) //if TimeoutBagKeys is null, clear all timeouts.
    {
        for (var i = 0; i < TimeoutBag.length; i++)
        {
           if (TimeoutBag[i] != null) {
            clearTimeout(TimeoutBag[i].TimeoutId);
           }
        }
    }
    else //otherwise, an array of keys for the timeout bag has been passed in. clear those timeouts.
    {
        var ClearedIdsString = "";
        for (var i = 0; i < TimeoutBagKeys.length; i++)
        {
            if (TimeoutBag[TimeoutBagKeys[i]] != null)
            {
                clearTimeout(TimeoutBag[TimeoutBagKeys[i]].TimeoutId);
                ClearedIdsString += TimeoutBag[TimeoutBagKeys[i]].TimeoutId;
            }
        }        
    }
}
function dynamicSearch(viewname) {

        $(".lookup_info").slideUp();


        if ($("#id_JobID").val().length >= 3) {
            var orgLookupUrl = "/deposits/" + viewname + "/?q=" + $("#id_JobID").val();
                getBatchInfo(orgLookupUrl);

        }
        else if ($("#id_JobID").val().length  == 0) {
            $("#loadimg").attr("src", "/static/icons/blank.gif");
            $(".lookup_info").slideUp();
        }
        else {
            $("#loadimg").attr("src", "/static/icons/loading.gif");
            $(".lookup_info").slideUp();
        }
}
function getBatchInfo(orgLookupUrl) {
                $.get(orgLookupUrl, function(data){ 
                    if (data == "False") {
                        $("#loadimg").attr("src", "/static/icons/red_x.png");
                        $(".lookup_info").html("No batch found - creating new batch.");
                        $("#lookup_submit").val("Create");
                        $(".lookup_info").slideDown();
                        toggleDepInputs("on");
                    }
                    else {  
                        $("#loadimg").attr("src", "/static/icons/green_check.png");
                        $("#lookup_submit").val("Submit");
                        $(".lookup_info").html(data);
                        $(".lookup_info").slideDown()
                        toggleDepInputs("off");
                    };
                 });
}

【问题讨论】：

标签： javascript internet-explorer caching

【解决方案1】：

对此有三种解决方案：

使用$.post 而不是$.get。
在您的 URL 中添加一个随机的 GET 参数，例如?update=10202203930489（当然，每个请求都需要不同）。
通过发送正确的标头 (if-modified-since) 在服务器端禁止缓存。

【讨论】：

【解决方案2】：

您需要为每个请求设置唯一的 URL。防失败的方法是引入新的 GET 参数，它的值是时间戳 - 所以每个请求的 URL 都是唯一的，因为时间戳总是在变化，所以 IE 无法缓存它。

url = "/deposits/orglookup/?q=123&t=" + new Date().getTime()

因此，您现在有两个参数（q 和 t），而不是只有一个参数（q），但由于服务器通常不关心额外的参数，所以没关系

【讨论】：

【解决方案3】：

一个常用的技巧是将时间戳作为查询字符串参数附加到查找 URL，从而在每次发出请求时生成唯一的 URL。

var orgLookupUrl = "/deposits/" +
    viewname + "/?q=" +
    $("#id_JobID").val() + "&time=" + new Date().getTime();;

【讨论】：