通过ajax加载内容

Question

我已经创建了这个用于加载数据的 ajax 脚本。

$("#submit").click(function(e){
    e.preventDefault()  
    var loading = "<img src='/images/loading.gif' alt='Loading...' />";
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
//  var post = $(this).attr("name") + "=" + $(this).val();
    var form_data = $('#search_form').serialize();// + "&" + post ;

    var scrolloffset=20;
    $('#search').html(loading);
    $.post("dosearch.php",form_data,function(newitems) {
        $('#content').append(newitems);
            });
        if(scrolltop>=(scrollheight-(windowheight+scrolloffset))){
            $.post("dosearch.php",form_data,function(newitems) {
        $('#content').append(newitems);
            });
        }     
        });
});

此脚本将获取表单数据并将它们序列化并将它们发布到dosearch.php，之后 dosearch 将发布我们搜索 Limited 0,6 的数据。当滚动条到达结果 div 的底部时，我想获取更多内容，因此我创建了这个函数，它将再次获取我们的表单数据和结果 div 中的 div 数量......然后使用这个 div 结果以防万一限制 $number,6。

function scroll_result(form_data){
    var loading = "<img src='/images/loading.gif' alt='Loading...' />";
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
    var scrolloffset=20;
    var divnumber = $('#content').children().size();
    var form_data = form_data + "&size=" + divnumber;

    if(scrolltop>=(scrollheight-(windowheight+scrolloffset)))
    {
        //fetch new items
        $.post('dosearch.php', form_data, function(newitems){
        $('#content').append(newitems);
        });
    }
    setTimeout('scroll_result(form_data)', 1500);
}

这个功能不起作用，我需要一些帮助

提前谢谢...

Answer 1

我只是在这里设置了一个示例滚动监听应用程序：

http://jsfiddle.net/E2wj2/2/

您需要为 scrollbox 监听滚动事件，

$('#scrollbox').scroll(function(){
  console.log('scrolling');
  scrolltop=$('#scrollbox').attr('scrollTop');
  if(scrolltop>=(scrollheight-(windowheight+scrolloffset))) {
    //do whatever you wish to do
  }
});

希望这会有所帮助。