php - 滚动到页面底部时使用 ajax 加载 PHP 代码-不适用于 iPhone

Question

我有我的 ajax，当用户到达页面底部时，它会加载一个 PHP 脚本。在 iPhone 上它会多次加载同一个(它会加载 id #5，然后会一遍又一遍地不断加载 id #4 - 在 PC 上它会加载 id #5 到 id #1。)

index.php - AJAX

<script>
    $(document).ready(function(){
      var loadLogs = 0;

      $.ajax({
        type: 'GET',
        url: 'inc/loadLogs.php',
        data:{
          'offset': 0,
          'limit': 1
        },
        success: function(data){
          $('#showAuditLogs').append(data);
          loadLogs += 1;
        }
      });

      $(window).scroll(function(){
        if($(window).scrollTop() >= $(document).height() - $(window).height()){
          $.ajax({
            type: 'GET',
            url: 'inc/loadLogs.php',
            data:{
              'offset': loadLogs,
              'limit': 1
            },
            success: function(data){
              $('#showAuditLogs').append(data);
              loadLogs += 1;
            }
          });
        }
      });
    });
  </script>

index.php - HTML

<div id="showAuditLogs">

</div>

加载日志.php

<?php

  include 'database.php';

  $limit = $_GET['limit'];
  $offset = $_GET['offset'];

  $logs = DB::query("SELECT * FROM auditlog ORDER BY id DESC LIMIT $limit OFFSET $offset");
  foreach($logs as $l){
    $action = $l['action'];
    $logId = $l['id'];
    echo "<p class='card-text'><strong>$logId </strong>$action</a></p><hr style='background-color: white;'>";
  }

?>

Answer 1

尝试创建一个按钮之类的元素，当您单击它时加载脚本，然后使用此代码在您滚动到底部时触发按钮(适用于所有设备):

var CheckIfScrollBottom = debouncer(function() {
    if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
        $('your button id or class').trigger('click');
    }
});

您的 ajax 将是:

<script>
  $(document).ready(function(){
    var loadLogs = 0;
    $.ajax({
      type: 'GET',
      url: 'inc/loadLogs.php',
      data:{
        'offset': 0,
        'limit': 1
      }
      ,
      success: function(data){
        $('#showAuditLogs').append(data);
        loadLogs += 1;
      }
    }
          );
    var CheckIfScrollBottom = debouncer(function() {
      if (getDocHeight() == getScrollXY()[1] + window.innerHeight) {
        $.ajax({
          type: 'GET',
          url: 'inc/loadLogs.php',
          data:{
            'offset': loadLogs,
            'limit': 1
          }
          ,
          success: function(data){
            $('#showAuditLogs').append(data);
            loadLogs += 1;
          }
        }
              );
      }
    }
                                       );
  }
                   );
  document.addEventListener('scroll', CheckIfScrollBottom);
  function debouncer(a, b, c) {
    var d;
    return function() {
      var e = this,
          f = arguments,
          g = function() {
            d = null, c || a.apply(e, f)
          }
      ,
          h = c && !d;
      clearTimeout(d), d = setTimeout(g, b), h && a.apply(e, f)
    }
  }
  function getScrollXY() {
    var a = 0,
        b = 0;
    return "number" == typeof window.pageYOffset ? (b = window.pageYOffset, a = window.pageXOffset) : document.body && (document.body.scrollLeft || document.body.scrollTop) ? (b = document.body.scrollTop, a = document.body.scrollLeft) : document.documentElement && (document.documentElement.scrollLeft || document.documentElement.scrollTop) && (b = document.documentElement.scrollTop, a = document.documentElement.scrollLeft), [a, b]
  }
  function getDocHeight() {
    var a = document;
    return Math.max(a.body.scrollHeight, a.documentElement.scrollHeight, a.body.offsetHeight, a.documentElement.offsetHeight, a.body.clientHeight, a.documentElement.clientHeight)
  }
</script>