0

我一直在使用 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>)");
}
4

1 回答 1

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

要从该数组中删除第一项，那么您是否想将数组限制为最大长度为 100 个条目，您可以添加以下内容：

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

在您的“成功：”中向所述数组添加新 ID 后立即 - 您的 ajax 调用的一部分

[编辑二]

你仍然得到你的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>)");
}
于 2013-02-14T13:07:44.497 回答