Javascript 通过onload()和刷新按钮刷新网页

Javascript 通过onload()和刷新按钮刷新网页,javascript,html,ajax,django,Javascript,Html,Ajax,Django,我有一个django网页,根据一些分析基本上显示了一些图表。此分析可以持续10分钟以上,在此期间,用户可以按网页上的刷新按钮刷新图形。因此,在后端,目录中的图形(图像)被新图形覆盖(路径和图像名称保持不变)。但当我按下浏览器刷新按钮时,这一点就会反映出来,而当我点击网页上的刷新按钮时,这一点就不会反映出来,即使在这两个地方使用的代码都是彼此的副本 我的onload函数id调用了getGraphs()。每次通过单击浏览器刷新按钮重新加载页面时,将调用此函数,代码如下: function getGr

我有一个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");
                    }
                });
    }
版本2(与我在onload函数中的代码完全相同,但图形没有更新):

功能刷新(ip)
{
$.ajax({
url:“/getGraphs/”,
键入:“GET”,
数据:{'ip':ip},
contentType:'application/json;charset=utf-8',
数据类型:“json”,
成功:功能(结果){
$('#res').empty();
resDiv=document.getElementById(“res”);
var data=result.data[“目录”];
对于(变量i=0;i
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>
刷新
我很困惑我做错了什么,同样需要指导


提前感谢。

问题很可能是:

因此,在后端,目录中的图形(图像)被覆盖 使用新图形(路径和图像名称保持不变)

当您动态更新DOM时,浏览器可能足够智能,不会两次下载同一图像

您可以做的是尝试通过向url添加随机查询字符串来“使”图像无效

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

显示您调用第二个刷新(ip)函数的刷新按钮的HTML代码。我猜当调用第二个函数时,您没有发送ip参数,这就是它不工作的原因。我为刷新按钮添加了HTML代码。我确保在调用version2时通过了ip。当您点击刷新按钮时,控制台中的错误是什么?我不会得到错误。它不会显示更新后的图表。你是对的。在修改路径名时,现在图形已更新。非常感谢。
 <button id="refresh" onclick="refresh('{{ip}}')" style="position:relative;display: inline-block;width:11vh;" class="btn btn-primary">REFRESH</button>
var path = "results/.../..."
path += "?" + Math.random()