如何在滾動時或滾動時獲取更多JSON數據？

Question

我下面有以下代碼，當用戶搜索術語時，該代碼將返回一些結果。 一旦得到一些結果，我想添加功能，以便在向下滾動時可以獲取更多數據？

注意：我不想使用任何插件。

$(document).ready(function() {
         $("#submit").click(function (event) { // wire up this as an onclick event to the submit button.                   
                    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);

                 });



            });         
});

Answer 1

您可以使用jquery .scroll（）方法。 您有兩個選擇：在頁面加載時保存所有數據，然后在用戶滾動時顯示，或者在每次有向下滾動請求時發出ajax請求。

$("#yourSelector").on('scroll', function(){
    // do stuff
});

或簡單地使用快捷方式：

$("#yourSelector").scroll(function(){
   // do stuff
});

我希望這有幫助！

這是指向jquery滾動api的鏈接，以了解選項（例如指定向下滾動）： http : //api.jquery.com/scroll/

Answer 2

您還可以使用jquery綁定滾動事件：

將整個代碼放入一個函數中：

function myfun(){
//-- you code
}

並從兩個事件中調用myfun() ：

點擊事件-

 $("#submit").click(function (event) {
     myfun();
 });

滾動事件-

 $("#yourSelector").scroll(function(){
       myfun();
    });