0

jQueryを使用して画像ビューアを作成しており、ajaxを使用してPHPコードを呼び出して画像の新しいIDを取得することで、画像を動的に表示することができました。ユーザーがボタンをクリックすると、関連する情報とともに画像が表示されますが、他の情報はハッシュ内に保存されないため、戻る場合は画像のみが変更されます。

私はハッシュされたIDの情報を取得するためにajaxポストコールを使用しようとしましたが、これを行うと見た目のように画像を循環し、これは私が望むものではありません. 私のコードは以下の通りです：

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

その配列から最初のアイテムを削除するには、配列をたとえば100エントリの最大長に制限したい場合は、これを追加できます：

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

「成功：」で上記の配列に新しいIDを追加した直後 - ajax呼び出しの一部

[編集 II]

それでも ajax リクエストが間違っている場合は、内部の getJSON 呼び出しで ajax リクエストを上書きします

例として、2 番目のリクエストのない 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 に答える