无刷新动态加载数据 滚动条加载适合评论等页面

无刷新动态加载数据：滚屏加载更多评论内容

在当今的网页设计中，实现评论页面等动态内容的滚动加载已成为一种趋势。本文将通过一个简单的数据库实现展示如何操作。本例数据库设计清晰，使得操作过程更为直观。

首先是 HTML 部分，我们的代码主要定义了一个容器用于存放评论数据。在容器内部，每一个评论都是一个单独的元素，包含了评论头（包括日期和作者）和评论内容。代码如下：

```html

```

然后是PHP部分，负责从数据库中获取评论数据并输出到前端。这里使用MySQL查询语句获取的评论列表，并通过JSON格式输出数据。代码如下：

```php

$page = intval($_GET['page']); // 获取请求的页数

$start = ($page - 1) 5; // 计算查询开始的索引位置，此处以每页显示5条评论为例

$query = mysql_query("SELECT FROM content ORDER BY id DESC LIMIT $start, 5"); // 查询数据库获取评论数据

while ($row = mysql_fetch_array($query)) {

$arr[] = array(

'content' => $row['message'], // 评论内容

'author' => $row['id'], // 作者ID作为作者标识，可能需要进一步获取真实作者名等信息

'date' => date('m-d H:i', strtotime($row['updatetime'])) // 评论时间格式化输出

);

}

echo json_encode($arr); // 输出JSON格式的数据

?>

```

接下来是 JavaScript 部分，用于监听页面滚动事件并发送 AJAX 请求获取更多数据。当页面滚动到距离底部一定距离时，通过 `$.getJSON` 方法向服务器请求数据。代码如下：

```javascript

$(function(){ // DOM加载完成后的初始化操作

var winH = $(window).height(); // 获取窗口可视高度

var i = 1; // 当前页数，用于向服务器请求数据时的页码参数传递

$(window).scroll(function () { // 监听滚动事件

var pageH = $(document.body).height(); // 获取整个页面的高度

var scrollT = $(window).scrollTop(); // 获取滚动条当前位置的高度值（距离顶部的距离）

// 判断是否滚动到页面底部的一定比例（比如小于整个页面的百分之一）就触发加载新数据的动作。具体比例数值可按需调整。 if((pageH - winH - scrollT) / winH < 某个较小数值){ }）；部分代码省略... } }); }); ```这部分代码会动态地向服务器请求新的评论数据，并将这些数据追加到容器中。当所有数据都已加载完毕时，显示提示信息提示用户不再滚动。这个实现允许用户在浏览大量数据时不必一次性加载所有内容，提高了用户体验和页面性能。最后需要注意的是，在实际应用中需要根据具体情况调整代码中的细节部分，比如分页逻辑、样式设置等。通过本例的介绍，相信您对如何实现滚屏加载更多数据的评论页面有了更清晰的了解。