没有获得滚动的新数据,它在滚动时一次又一次地添加相同的json数据

时间:2013-09-30 14:03:08

标签: javascript jquery infinite-scroll

我在滚动时实现了加载数据,在滚动时添加了数据。但它似乎在滚动中一次又一次地添加相同的东西..它不是gettign下一个记录/ 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 个答案:

答案 0 :(得分:0)

每次获取数据时,您必须拥有一个变量,以便跟踪到目前为止所获取的信息。

在每次新调用时,将此变量传递给一个参数,如偏移量,因此在服务器端,您将知道必须检索哪个结果页面。

答案 1 :(得分:0)

在$ .getJSON的地方使用$ .ajax函数和post方法 希望你的问题能够得到解决。

答案 2 :(得分: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);

答案 3 :(得分:0)

嗯,你必须告诉Flickr向你发送下一批照片,否则他们会一遍又一遍地向你发送相同的照片。此外,Feed系统只能返回20张照片。

改为调用和API方法,并使用“page”参数。