javascript - 使用 Ajax 的页面滚动效果 如何将数据加载到页面中

Question

我正在将数据从 mysql 表加载到 html 表中。我正在使用 AJAX php Jquery 来完成此操作。我需要确保无论表中有多少数据，我构建它的方式都能正常工作。

现在我正在处理一个 5000 行长的表，但此表中最终将有 88000 行。

我知道如果我在页面加载时加载所有数据，这可能会导致服务器和页面加载时间停滞不前。

我的问题是我现在的逻辑是将所有结果加载到 $results 中并只查询所需的行数，因为它是分页的。或者即使它是分页的，我的网页也会占用整个数据库中的每一行来加载时间。

如果正在加载整个表，我该如何更改查询以仅在需要时加载数据。它在页面滚动时加载。

我还需要编写一个搜索功能。由于数据是分页的，我会在 $results 中搜索数据还是使用单独的搜索功能查询表？哪种方式会提供更少的加载时间，这会给我的用户带来糟糕的体验？

AjAX

<script type="text/javascript">
jQuery(document).ready(function($) {
var busy = true;
var limit = 5;
var offset = 0;
var assetPath = "<?php echo $assetPath ?>"

function displayRecords(lim, off) {
  jQuery.ajax({
          type: "GET",
          async: false,
          url: assetPath,
          data: "limit=" + lim + "&offset=" + off,
          cache: false,
          beforeSend: function() {
            $("#loader_message").html("").hide();
            $('#loader_image').show();
          },
          success: function(html) {
            $("#productResults").append(html);
            $('#loader_image').hide();
            if (html == "") {
             $("#loader_message").html('<button data-atr="nodata" class="btn btn-default" type="button">No more records.</button>').show()
            } else {
             $("#loader_message").html('Loading... Please wait <img src="http://www.wuno.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
            }
            window.busy = false;

          }
        });
}

(function($) {
$(document).ready(function() {
if (busy == true) {
  displayRecords(limit, offset);
  busy = false;
}
});
})( jQuery );



(function($) {
$(document).ready(function() {
$(window).scroll(function() {
          // make sure u give the container id of the data to be loaded in.
          if ($(window).scrollTop() + $(window).height() > $("#productResults").height() && !busy) {
            offset = limit + offset;
         displayRecords(limit, offset);

          }
});
});
})( jQuery );
});
</script>

这是我查询数据库的方式

$limit = (intval($_GET['limit']) != 0 ) ? $_GET['limit'] : 5;
$offset = (intval($_GET['offset']) != 0 ) ? $_GET['offset'] : 0;

$sql = "SELECT * FROM wuno_inventory WHERE 1 ORDER BY id ASC LIMIT $limit OFFSET $offset";
try {
  $stmt = $DB_con->prepare($sql);
  $stmt->execute();
  $results = $stmt->fetchAll();
} catch (Exception $ex) {
  echo $ex->getMessage();
}
if (count($results) > 0) {
  foreach ($results as $res) {
    echo '<tr class="invent">';  
    echo '<td>' . $res['wuno_product'] . '</td>';  
    echo '<td>' . $res['wuno_alternates'] . '</td>';  
    echo '<td>' . $res['wuno_description'] . '</td>';  
    echo '<td>' . $res['wuno_onhand'] . '</td>';  
    echo '<td>' . $res['wuno_condition'] . '</td>';  
    echo '</tr>';   
  }
}

Answer 1

通过从服务器传输一个 JSON 对象，limit、offset 和 html(也许还有其他 lime status_messsage 等)值可以同时传输给客户端。

在客户端，我的意思是这样的:

var limit = 5;
var offset = 0;
var assetPath = "<?php echo $assetPath ?>"

function displayRecords(lim, off) {
  jQuery.ajax({
      type: "GET",
      async: false,
      url: assetPath,
      dataType: "json",                         // We expect to receive a json object
      data: "limit=" + lim + "&offset=" + off,
      cache: false,
      beforeSend: function() {
        $("#loader_message").html("").hide();
        $('#loader_image').show();
      },
      success: function(json) {
        limit = json.lim;                       // corr to $output['lim']
        offset = json.offs;                     // corr to $output['offs']
        $("#productResults").append(json.html); // corr to $output['html']
        $('#loader_image').hide();
        if (json.html == "") {
         $("#loader_message").html('<button data-atr="nodata" class="btn btn-default" type="button">No more records.</button>').show()
        } else {
         $("#loader_message").html('Loading... Please wait <img src="http://www.wuno.com/monstroid/wp-content/uploads/2016/02/LoaderIcon.gif" alt="Loading">').show();
        }
        window.busy = false;

      }
    });
}

...在服务器端:

$limit = (intval($_REQUEST['limit']) != 0 ) ? $_REQUEST['limit'] : 5;
$offset = (intval($_REQUEST['offset']) != 0 ) ? $_REQUEST['offset'] : 0;

$sql = "SELECT * FROM wuno_inventory WHERE 1 ORDER BY id ASC LIMIT $limit OFFSET $offset";
// Make sure to handle invalid offset values properly, 
// as they are not validated from the last request.

// Prepare the $output structure (will become a json object string)
$output = array(
  'lim'=>$limit,
  'offs'=>$offset+$limit,
  'html'=>''
);
try {
  $stmt = $DB_con->prepare($sql);
  $stmt->execute();
  $results = $stmt->fetchAll();
} catch (Exception $ex) {
  $output['html'] .= $ex->getMessage();
}
if (count($results) > 0) {
  foreach ($results as $res) {
    $output['html'] .= '<tr class="invent">';  
    $output['html'] .= '<td>' . $res['wuno_product'] . '</td>';  
    $output['html'] .= '<td>' . $res['wuno_alternates'] . '</td>';  
    $output['html'] .= '<td>' . $res['wuno_description'] . '</td>';  
    $output['html'] .= '<td>' . $res['wuno_onhand'] . '</td>';  
    $output['html'] .= '<td>' . $res['wuno_condition'] . '</td>';  
    $output['html'] .= '</tr>';   
  }
}
// Now encode $output as a json object (string) and send it to the client
header('Content-type: application/json; charset=utf-8');
echo json_encode($output, JSON_HEX_TAG|JSON_HEX_AMP|JSON_HEX_APOS|JSON_HEX_QUOT|JSON_FORCE_OBJECT);