0

I have the following code below which returns some results when the user searches a term. Once i get some results,I want to add feature which will allow me to get more data when scrolling down ward?

NOTE: I dont want to use any plugin(s).

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

                 });



            });         
});
4

2 回答 2

1

您可以使用 jquery .scroll() 方法。您有两个选择，在页面加载时保存所有数据，然后在用户滚动时显示，或者每次有向下滚动请求时发出 ajax 请求。

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

或简单地使用快捷方式：

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

我希望这有帮助！

这是 jquery 滚动 api 的链接，以了解选项（例如指定向下滚动）：http ://api.jquery.com/scroll/

于 2013-09-27T22:12:25.937 回答
0

您还可以使用 jquery 绑定滚动事件：

将您的整个代码放入一个函数中：

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

并myfun()从两个事件中调用：

点击事件-

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

在滚动事件 -

 $("#yourSelector").scroll(function(){
       myfun();
    });
于 2013-09-28T14:26:16.400 回答