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

Posted 2023-02-24

【中文标题】通过 onload() 和刷新按钮刷新网页

【英文标题】：Refreshing a webpage through onload() and through a refresh button

【发布时间】：2017-04-08 07:15:06

【问题描述】：

我有一个 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();
    

版本 2（我在 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>

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

提前致谢。

【问题讨论】：

向我们展示您调用第二个 refresh(ip) 函数的刷新按钮的 HTML 代码。

我的猜测是当调用第二个函数时，你没有发送 ip 参数，这就是它不起作用的原因。

我已经为刷新按钮添加了html代码。我确保在调用 version2 时传递了 ip。

点击刷新按钮时控制台出现什么错误？？

我不会收到错误消息。它根本不会显示更新的图表。

【参考方案1】：

问题很可能是这样的：

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

当您动态更新 DOM 时，浏览器可能足够聪明，不会两次下载同一个图像。

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

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

【讨论】：

你是对的。在修改路径名称时，现在图表已更新。谢谢！