Question

我有一个django网页，基本上会根据某些分析显示一些图表。该分析可以持续超过10分钟，在此期间用户可以按下网页上的刷新按钮来刷新图形。所以在后端，目录中的图形（图像）被新图形覆盖（路径和图像名称保持不变）。但是当我按下浏览器刷新按钮时却反映了这种情况，但是当我点击我网页上的刷新按钮时，即使这两个地方使用的代码都是彼此的副本，也没有反映出来。

我的onload功能ID名为getGraphs()。每次通过单击浏览器刷新按钮重新加载页面时，都会调用此函数，代码如下，

function getGraphs(ip)
    {
            $.ajax({
                    url: '/getGraphs/',
                    type: 'GET',
                    data: {"ip":ip},
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    success: function (result) {

                        $('#res').empty();  //div I am updating

                        resDiv = document.getElementById("res");
                        var data = result.data["directory"];
                        for (var i = 0; i < data.length; i++)
                        {                                
                            resDiv.innerHTML+=('<h2>'+data[i]["name"]+'</h2>');
                            var images = data[i]["images"];

                            for (var j = 0; j < images.length; j++) {
                                console.log("i:"+i+" dataLen:"+images.length)
                                var path="results/"+result.uniqueID+"/"+data[i]["name"]+"/"+images[j]["name"];  //the path of the image
                                resDiv.innerHTML+=("{% load static %}<img class='hoverImages' onclick=\"zoomIn('"+path+"')\" style='width:600px;height:300px;' src=\"{%static '"+path+"'%}\"/>&nbsp&nbsp&nbsp&nbsp");
                            }
                        }

                    },
                    error: function (){
                        alert("error from getting dir");
                    }
                });
    }

我在网页上有刷新按钮代码的两个版本。

Version1（这基本上调用onload函数并更新图表）：

function refresh()
    {
        location.reload();
    }

Version2（onload函数中的确切代码，但图表未更新）：

function refresh(ip)
    {
        $.ajax({
                url: '/getGraphs/',
                    type: 'GET',
                    data: {'ip':ip},
                    contentType: 'application/json; charset=utf-8',
                    dataType: "json",
                    success: function (result) {

                        $('#res').empty();

                        resDiv = document.getElementById("res");
                        var data = result.data["directory"];
                        for (var i = 0; i < data.length; i++)
                        {
                            resDiv.innerHTML+=('<h2>'+data[i]["name"]+'</h2>');
                            var images = data[i]["images"];

                            for (var j = 0; j < images.length; j++) {

                                var path="results/"+result.uniqueID+"/"+data[i]["name"]+"/"+images[j]["name"];
                                resDiv.innerHTML+=("{% load static %}<img class='hoverImages' onclick=\"zoomIn('"+path+"')\" style='width:600px;height:300px;' src=\"{%static '"+path+"'%}\"/>&nbsp&nbsp&nbsp&nbsp");
                            }
                        }

                    },
                     error: function (){
                        alert("Error refresh!")
                    }

            }); 
    }

HTML代码（已编辑）：

对于版本1：

 <button id="refresh" onclick="refresh()" style="position:relative;display: inline-block;width:11vh;" class="btn btn-primary">REFRESH</button>

对于版本2：

 <button id="refresh" onclick="refresh('{{ip}}')" style="position:relative;display: inline-block;width:11vh;" class="btn btn-primary">REFRESH</button>

我对自己做错了什么非常困惑，并且需要相同的指导。

提前致谢。

Answer 1

问题很可能是这样的：

因此在后端，目录中的图形（图像）将被覆盖使用新图表（路径和图像名称保持不变）。

当您动态更新DOM时，浏览器可能非常智能，无法下载相同的图像两次。

你可以做的是尝试＆＃34;无效＆＃34;通过将随机查询字符串附加到网址来获取图像。

var path = "results/.../..."
path += "?" + Math.random()

通过onload（）和刷新按钮

1 个答案: