滚动到页面底部时,使用ajax加载PHP代码-在iPhone上不起作用

我有一个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>

loadLogs.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;'>";
  }

?>

解决方法:

尝试创建一个像按钮之类的元素,以在单击脚本时加载脚本,然后在滚动至底部时使用此代码触发按钮(适用于所有设备)：

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>