从数据库加载页面滚动在PHP和jQuery与Ajax在同一页面的方法如下:
下面是一个示例代码:
在PHP文件中(例如load_data.php):
<?php
// 连接数据库并获取数据
function loadDataFromDatabase($offset, $limit) {
// 连接数据库
$conn = new mysqli("数据库主机", "用户名", "密码", "数据库名");
// 检查连接是否成功
if ($conn->connect_error) {
die("数据库连接失败: " . $conn->connect_error);
}
// 构建查询语句
$sql = "SELECT * FROM 表名 LIMIT $offset, $limit";
// 执行查询
$result = $conn->query($sql);
// 检查查询结果
if ($result->num_rows > 0) {
// 将结果转换为关联数组并返回
return $result->fetch_all(MYSQLI_ASSOC);
} else {
return [];
}
}
// 获取传递的参数
$offset = $_GET['offset'];
$limit = $_GET['limit'];
// 调用函数获取数据
$data = loadDataFromDatabase($offset, $limit);
// 返回数据
echo json_encode($data);
?>
在前端页面中的JavaScript代码:
$(document).ready(function() {
var offset = 0;
var limit = 10;
// 加载数据函数
function loadData() {
$.ajax({
url: "load_data.php",
type: "GET",
data: {offset: offset, limit: limit},
dataType: "json",
success: function(response) {
// 处理返回的数据
if (response.length > 0) {
// 将数据添加到页面上已经存在的内容中
$.each(response, function(index, item) {
// 处理每个数据项并添加到页面中
// ...
});
// 更新偏移量
offset += limit;
}
}
});
}
// 监听页面滚动事件
$(window).scroll(function() {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
// 当页面滚动到底部时,加载数据
loadData();
}
});
// 初始化加载数据
loadData();
});
请注意,上述代码仅为示例,你需要根据实际情况进行调整和修改。另外,你还需要根据你的数据库结构和表名来修改SQL查询语句。
领取专属 10元无门槛券
手把手带您无忧上云