0

我在滚动上实现了加载数据，在滚动上添加数据。但它似乎在滚动上一次又一次地添加相同的东西..它不会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

4 回答 4

0

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

于 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 回答
0

每次获取数据时，您都必须有一个变量来跟踪迄今为止获取的信息。

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

于 2013-09-30T14:10:49.520 回答
0

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

改为调用和 API 方法，并使用“页面”参数。

于 2013-09-30T20:55:24.930 回答