Question

我正在尝试实现一种功能，当用户到达'div'的末尾时，从数据库加载更多数据，类似于twitter。我有一个名为'userposts_panel'的'div'，它由几个其他div组成，用于显示数据库中的内容。即

<div id="userposts_panel">   
    <?php echo "<br/>
            <div class='new_msg'>  
               <div class='user_dp'>
                 <img src='$profile_pic' width= '65px' height= '68px'/>
               </div>
               <div class='msg_content'>
                    <span>$message_content </span> <br/> <br/>
               </div>
               <div class='user_details'> 
                    <span>Posted by: </span> 
                    <a href='$thoughts_by'> <b> $name_of_user </b> </a> on $date_of_msg 
               </div>
            </div><br/>"; ?>
</div>

我定义了以下JavaScript来获取所有数学数据，例如当用户到达页面末尾等时。但我无法弄清楚我是如何从数据库中获取新数据并将其发布的在同一页面上（见if语句）。目前，我有一个查询，在页面上显示数据库中的10个帖子 - LIMIT 1，当用户滚动到userposts_panel的底部时，我需要它来显示userposts_panel除了已经展示的帖子之外，还有10个新帖子。

 function yHandler (){
    var userposts_panel = document.getElementById('userposts_panel');   
    var contentHeight = userposts_panel.offsetHeight; // get page height
    var yOffset = window.pageYoffset;// get vertical scroll position - find out where user is on scroll.
    var y = yOffset + window.innerHeight;

     if (y >=contentHeight){ // if the user scroll to the very bottom, do this..
         userposts_panel.innerHTML += '<div class="userposts_panel"></div>'
         // AJAX call to get more dynamic data here...

         }
 }
    // event listner
    window.onscroll = yHandler;

我是否必须创建新的div而不是使用userposts_panel来显示已存在的新内容？如何使用AJAX从div中的数据库加载数据？

Answer 1

我尝试将答案分成几个部分。

a）到达页面底部的处理程序

$(window).scroll(function() {
    if($(window).scrollTop() == $(document).height() - $(window).height()) {
        //Run the ajax call or other here
    }
});

b）执行ajax调用以获取新数据

var url = "http://____";  //API url
var data = "page=2&tar=xx";  //parameters
$.ajax(
    {
        data: data,
        dataType: 'json',
        type: "POST",
        url: url,
        success: function(response) {
           // Handle the new data here
        }
    }
);

c）将新数据放入页面

//Here is just an example on placing data via jquery, for your reference
//To make it simple, you may do it on the server side

$.each(response.data,function(key,value){  //run a loop on the response data, it should be in json format
    var clone_grid = $(".new_msg").last().clone();  //Copy the last new msg div
    clone_grid.find('.user_dp').attr('src',value.image);//change the images of the clone div
    clone_grid.find('.msg_content').html(value.message);//change the message of the clone div
    //...
    //...
    $("#userposts_panel").append(clone_grid);//Place it to the end of the #userposts_panel div
}

我希望它可以解决你的问题并抱歉我的英语不好。

当用户到达底部

1 个答案: