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;
      }
      });
    }

在滚动如何自动加载数据的同时

2 个答案: