滾動時如何自動加載數據

Question

滾動時如何自動加載數據。無頁面刷新數據應加載。

<script> 
    $(document).ready(function() { 

     $('#data_form').on('submit', function(e) { 
      var form_data = $(this).serialize(); 
      $.ajax({ 
       type: "POST", 
       url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication', 
       data: form_data, 
       success: function(data) { 
        scrollDown(); 
        var message = $("#messagee").val(); 

        $('#chat_log').append('<div class="row msg_container base_sent active"><div class="row msg_container base_receive"><div class="col-md-12 col-xs-12"><div class="messages msg_receive"><p><a>' + message + '</a></p></div></div></div></div>'); 

        $('#messagee').val(''); 
       }, 
       error: function() { 
        alert('failed'); 
       } 
      }); 
      e.preventDefault(); 
     }); 
     scrollDown(); 

     function scrollDown() { 
      $('.msg_container_base').animate({ 
       scrollTop: $('.msg_container_base').prop("scrollHeight") 
      }, 200); 
     } 
    }); 
</script> 

Answer 1

後窗口滾動下來的數據負載修改這樣的：在我的代碼

$(window).scroll(function(){ 
     if($(document).height() <= $(window).scrollTop() + $(window).height()) 
     { 
     LoadData(); 
     } 
}); 

    function LoadData(){ 
    //No need submit a form 
    var form_data = $('#data_form').serialize(); 
       $.ajax({ 
        type: "POST", 
        url: '<?php echo base_url(); ?>index.php/Profile_cntrl/supplier_communication', 
        data: form_data, 
        success: function(data) { 
         var message = $("#messagee").val(); 
          $('#chat_log').append('<div class="row msg_container base_sent active"><div class="row msg_container base_receive"><div class="col-md-12 col-xs-12"><div class="messages msg_receive"><p><a>' + message + '</a></p></div></div></div></div>'); 
          $('#messagee').val(''); 
        }, 
        error: function() { 
         alert('failed'); 
        } 
       }); 
       e.preventDefault(); 
    } 

Answer 2

你可以這樣做。

這只是一個例子。請根據烏拉圭回合的要求

$(window).scroll(function() 
    { 
     if($(document).height() <= $(window).scrollTop() + $(window).height()) 
     { 
     loadmore(); 
     } 
    }); 

    function loadmore() 
    { 
     var val = document.getElementById("row_no").value; 
     $.ajax({ 
     type: 'post', 
     url: 'get_results.php', 
     data: { 
     getresult:val 
     }, 
     success: function (response) { 
     var content = document.getElementById("all_rows"); 
     content.innerHTML = content.innerHTML+response; 

     // We increase the value by 10 because we limit the results by 10 
     document.getElementById("row_no").value = Number(val)+10; 
     } 
     }); 
    }