使用哈希處理數據

Question

我一直在使用jQuery創建圖像查看器，並且我設法通過使用ajax來調用我的PHP代碼以獲取圖像的新ID，從而使圖像動態顯示。當用戶點擊按鈕時，圖像將顯示其相關信息，但是如果它們導航回來，則只有圖像發生更改，因爲其他信息未保存在散列內。

我試過使用ajax post調用來獲取哈希ID的信息，但是當我這樣做時，它通過圖像回收像一個外觀，這不是我想要的。我的代碼如下：

HTML

<img id="design" alt="" width="300" height="300" /><br> 
<span id="lblName" name="lblName"></span><br> 
<input type="button" id="GetImage" value="Get Image" /> 

jQuery的

$(document).ready(function(){ 

if (document.location.hash) { 
    updateImage(); 
} 

$("#GetImage").click(function() { 

    $.ajax({ //Make the Ajax Request 
     type: "POST", 
     url: "testimagelook.php", //file name 
     success: function(server_response){ 
      $.getJSON("testimagelook.php", function(data) {    
      var id = data.id; 
      document.location.hash = id; 
      $("#lblName").html(data.name); 
      $("#lblRating").html(data.average + " (" + data.votes + ") (<a href='User.php?uid=" + data.userid + "'>" + data.username + "</a>)"); 

      }); 
     } 
    }); 
}); 

$(window).bind('hashchange',function(){ 
     updateImage(); 
}); 

function updateImage() { 
    var id = document.location.hash.substring(1); // remove # 
    $('#design').attr('src','img/boxes/'+id+'.png'); 
} 
}); 

的PHP文件從JSON格式的數據庫返回一個隨機行。

編輯

下面的函數（updateImage（））已更改，但不工作：

function updateImage() { 
    var id = document.location.hash.substring(1); // remove # 


    if(known_images[id]==null){ 
     $.ajax({ //Make the Ajax Request 
      type: "POST", 
      url: "testimagelook.php", //file name 
      data: {boxid: id}, 
      success: function(server_response){ 
       $.getJSON("testimagelook.php", function(data) {    
       var id = data.id; 

       known_images[id] = []; 
       known_images[id] ['name'] = data.name; 
       known_images[id] ['average'] = data.average; 
       known_images[id] ['votes'] = data.votes; 
       known_images[id] ['username'] = data.username; 
       known_images[id] ['userid'] = data.userid; 

       }); 
      } 
     }); 
    } 

    $('#design').attr('src','img/boxes/'+id+'.png'); 
    $("#lblName").html(known_images[id]['name']); 
    $('#lblRating').html(known_images[id] ['average'] + " (" + known_images[id] ['votes'] + ") (<a href='User.php?uid=" + known_images[id] ['userid'] + "'>" + known_images[id] ['username'] + "</a>)"); 
} 

Answer 1

最簡單的辦法是

var known_images = []; 

增加您的JavaScript和您添加的每個ajax請求：

// to be added at success: // at the end of your code! 
known_images[id]= []; 
known_images[id] ['lbl'] = data.name; 
known_images[id] ['rating'] = data.average + " (" + data.votes + ") (<a href='User.php?uid=" + data.userid + "'>" + data.username + "</a>)"; 
// now all the information is chached in the browser 

現在在你的updateImage功能，您可以從已知的圖像

的陣列添加

$("#lblName").html(known_images[id]['lbl']); 
$("#lblRating").html(known_images[id]['rating'); 

更新這些信息太

[編輯]

，以減少存儲的數據量known_images你可以 容易使用

known_images.shift(); 

刪除這個數組的第一個項目，所以是要限制數組的amximum長說100個條目，你可以補充一點：

if(known_images.length >100) 
    known_images.shift(); 

在你加入一個新的ID，以上述陣列之後「成功：」 - 你的Ajax調用

[編輯II]

你仍然有你的Ajax請求錯了，你覆蓋在這裏與內部的getJSON呼叫

作爲一個例子您的Ajax請求是你updateImage功能的一部分沒有第二個要求：

function updateImage() { 
    var id = document.location.hash.substring(1); // remove # 

    if(known_images[id]==null){ 
     $.ajax({ //Make the Ajax Request 
      type: "POST", 
      url: "testimagelook.php", //file name 
      data: {boxid: id}, 
      success: function(server_response) 
      { 
       // Now just parse server_response into data without requesting NEW data like you did in your code! 
       var data = $.parseJSON(server_response); 
       var id = data.id; 

       known_images[id] = []; 
       known_images[id] ['name'] = data.name; 
       known_images[id] ['average'] = data.average; 
       known_images[id] ['votes'] = data.votes; 
       known_images[id] ['username'] = data.username; 
       known_images[id] ['userid'] = data.userid; 
       // mind the parentheses here 
      } 
     }); 
    } 
    $('#design').attr('src','img/boxes/'+id+'.png'); 
    $("#lblName").html(known_images[id]['name']); 
    $('#lblRating').html(known_images[id] ['average'] + " (" + known_images[id] ['votes'] + ") (<a href='User.php?uid=" + known_images[id] ['userid'] + "'>" + known_images[id] ['username'] + "</a>)"); 
}