0

スクロール時にデータを追加するロードデータを実装しました。しかし、スクロールで同じことを何度も追加しているようです..次のレコード/ jsonを取得していません。

既存のデータに新しいデータを追加するにはどうすればよいですか? 誰かが私にいくつかの例を示すことができますか?

注 - プラグインはありません。

<!DOCTYPE html >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script language="javascript">

function myAJAXfun(event) {
var searchTerm = $("#search").val(); // get the user-entered search term
                    var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
                    //var URL = "http://api.flickr.com/services/feeds/photos_public.gne";
                    var ID = "25053835@N03";
                    //var MYID-"84215563@N08";
                    //var tagmode="&tagmode=any";
                    //var format ="&format=json";
                    var tags="&tags="+ searchTerm;
                    var tagmode="&tagmode=any";
                    var jsonFormat = "&format=json&jsoncallback=?";                 
                    var ajaxURL= URL+"?jsoncallback=?id="+ID+tags+tagmode+jsonFormat;
                    //var ajaxURL= URL+"?"+tags+tagmode+jsonFormat;

                    $.getJSON(ajaxURL,function(data){
                    //$("h1").text(data.title);
                    //alert(data.length);

                    var photoHTML;
                     $("#photos").empty();  
                        if (data.items.length) {
                        //  alert(data.items.length);

                          $.each(data.items, function(i,photo) {

                            //var photoHTML = "<h4>" +photo.tags + "</h4>";
                            //photoHTML = "<p>";
                            photoHTML += '<a href="' + photo.link + '">';
                            photoHTML += '<img src="' + photo.media.m + '" alt="' + photo.media.m + '" title="' + photo.media.m + '"></a>';
                            //photoHTML = "</p>";
                            $('#photos').append(photoHTML).fadeIn(200);
                                                      });

                        } else {
                            alert(data.items.length);   
                             photoHTML = "<h2> No Results</h2>";
                             $('#photos').append(photoHTML).fadeIn(200);
                        }
                         //$('#photos').append(photoHTML).fadeIn(200);

                 });    
}
$(document).ready(function() {
 $("#submit").click(function (event) {
    myAJAXfun();

 });

  $("#scrollbox").scroll(function(){
       myAJAXfun();
    });
});





</script>
<style type="text/css" >
    #container{ width:400px; margin:0px auto; padding:40px 0; }
    #scrollbox{ width:900px; height:450px;  overflow:auto; overflow-x:hidden; border:1px solid #f2f2f2; margin-top:150px;}
    #container > p{ background:#eee; color:#666; font-family:Arial, sans-serif; font-size:0.75em; padding:5px; margin:0; text-align:right;}
    #searchBar {align:center; position:fixed; height:150px; background-color:#777; border:1px solid red; width:100%;top:0;}
    #photos {} 
</style>
</head>

<body>
<div align="center" id="searchBar">
<h2>flicker tag search</h2>
<div>Enter Search Term</div>
<input type="text" id=search />
<input type="button" id=submit value="Search" />
</div> 
  <div id="container">
    <div id="scrollbox" >
<div id="photos"></div> 
    </div>
    <p><span id="status" ></span></p>
</div>

</body>
</html>
4

4 に答える 4

0

データをフェッチするたびに、これまでにフェッチした情報を追跡する変数が必要です。

新しい呼び出しごとに、この変数にオフセットなどのパラメーターを渡します。これにより、サーバー側で取得する必要がある結果のページがわかります。

于 2013-09-30T14:10:49.520 に答える
0

Flickr に次の写真を送信するように指示する必要があります。そうしないと、Flickr は同じ写真を何度も送信し続けます。また、フィード システムは 20 枚の写真しか返しません。

代わりに API メソッドを呼び出し、"page" パラメータを使用します。

于 2013-09-30T20:55:24.930 に答える
0

$.getJSON の場所で post メソッドで $.ajax 関数を使用すると、問題が解決されることを願っています。

于 2013-09-30T14:28:42.860 に答える
0

photoHTML完了後に最後に追加しないのはなぜですか

$.each(data.items, function(i,photo) {

        photoHTML += '<a href="' + photo.link + '">';
        photoHTML += '<img src="' + photo.media.m + '" alt="' + photo.media.m + '" title="' + photo.media.m + '"></a>';
        //photoHTML = "</p>";
});
//Append Now
$('#photos').append(photoHTML).fadeIn(200);
于 2013-09-30T15:08:45.303 に答える