AJAX JQUERY 检索哈希值

Question

下面是我使用ajax动态改变图片而不刷新页面的代码。

HTML

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

JQUERY

$(document).ready(function(){

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

    $.ajax({ //Make the Ajax Request
             type: "POST",
             url: "testimagelook.php", //file name
             success: function(server_response){
                var id = server_response;
                document.location.hash = id;
                $('#design').attr('src','img/boxes/'+id+'.png');
             }
    });
});

});

php 文件 testimagelook.php 连接到数据库并带回我的一张图像的随机 ID。此代码适用于显示图像并将图像的 id 保存在 URL 的哈希中，从而允许我保留图像的用户历史记录。但是，当用户单击后退按钮时，我不确定如何检索先前的哈希值并使用正确的 id 重新加载图像。有什么想法吗？

Answer 1

试试这个：

 $(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){
                var id = server_response;
                document.location.hash = id;
             }
         });
    });

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

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