通過onload（）和刷新按鈕刷新網頁

我有一個django網頁，基本上顯示了一些基於某些分析的圖形。這種分析可能持續超過10分鐘，在此期間用戶可以按下網頁上的刷新按鈕來刷新圖表。因此，在後端，目錄中的圖形（圖像）會被新圖形覆蓋（路徑和圖像名稱保持不變）。但是，當我按下瀏覽器刷新按鈕時會反映這一點，但是當我單擊我網頁上的刷新按鈕時，即使兩個地方使用的代碼都是對方的副本，也不會這樣。通過onload（）和刷新按鈕刷新網頁

我的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"); 
        } 
       }); 
    }

我有一個刷新按鈕，我對網頁的刷新按鈕代碼兩個版本。

版本1（這基本上是調用的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>

我什麼我做錯了很迷茫，需要在同一個指導。

在此先感謝。

來源

2016-11-24 nidHi

向我們展示從調用第二個刷新（ip）函數的那個刷新按鈕的HTML代碼。 –

我的猜測是第二個函數被調用時，你沒有發送ip參數，這就是爲什麼它不起作用。 –

我已經添加了刷新按鈕的html代碼。當我調用version2時，我確信我傳遞了ip。 – nidHi

問題是最有可能的是：

所以在後端的目錄中的圖形（圖像）覆蓋新圖（路徑和圖像名稱保持不變）。

當您動態更新DOM時，瀏覽器可能足夠智能，無法兩次下載相同的圖像。

你可以做的就是嘗試通過將隨機查詢字符串附加到url來「無效」圖像。

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

來源

2016-11-24 06:11:07 hampusohlsson

你說得對。在修改路徑名稱時，現在更新圖表。謝謝！ – nidHi

通過onload（）和刷新按鈕刷新網頁

回答

相關問題