[编辑]

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();

要删除该数组中的FIRST项，那么您是否希望将数组限制为最多100个条目的长度，您可以添加此项：

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

在你的“success：”中为所述数组添加一个新的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>)");
}

使用哈希处理数据

1 个答案:

[编辑]

[编辑II]