【问题标题】:How to load values to page while scrolling the page如何在滚动页面时将值加载到页面
【发布时间】:2014-07-16 13:34:40
【问题描述】:

我有一个名为“用户”的表,在 MySql 数据库中有超过 3k 行。我想在滚动页面时获取数据库(就像 Facebook 新闻提要一样)。我冲浪了很长时间,但我无法获得它。希望尽快得到正面回应。

谢谢!

【问题讨论】:

  • 使用.scrollTop(), .height() with use of jQuery.ajax() 方法来完成它。
  • 我是 jQuery 新手,我可以得到一个链接以供参考。

标签: php jquery asp.net asp.net-ajax


【解决方案1】:

如果我明白你的意思:

数据库表

CREATE TABLE messages(
mes_id INT PRIMARY KEY AUTO_INCREMENT,
msg TEXT);

加载数据.php

当我们向下滚动网页时,脚本($(window).scroll) 发现你是at the bottom and calls the last_msg_funtion(). Take a look at $.post("") eg: $.post("load_data.php?action=get&last_msg_id=35")

<?php
include('config.php');
$last_msg_id=$_GET['last_msg_id'];
$action=$_GET['action'];

if($action <> "get")
{
?>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
function last_msg_funtion() 
{ 
var ID=$(".message_box:last").attr("id");
$('div#last_msg_loader').html('<img src="bigLoader.gif">');
$.post("load_data.php?action=get&last_msg_id="+ID,

function(data){
if (data != "") {
$(".message_box:last").after(data); 
}
$('div#last_msg_loader').empty();
});
}; 

$(window).scroll(function(){
if ($(window).scrollTop() == $(document).height() - $(window).height()){
last_msg_funtion();
}
}); 
});
</script>
</head>
<body>
<?php 
include('load_first.php'); //Include load_first.php 
?>
<div id="last_msg_loader"></div>
</body>
</html>
<?php
}

else
{
include('load_second.php'); //include load_second.php
}
?>

load_first.php 包含从消息表中加载 20 行的 PHP 代码。

<?php
$sql=mysql_query("SELECT * FROM messages ORDER BY mes_id DESC LIMIT 20");
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg'];
?>
<div id="<?php echo $msgID; ?>" class="message_box" > 
<?php echo $msg; ?>
</div> 
<?php
} 
?>

load_second.php 包含从消息表中加载比 last_msg_id 少 5 行的 PHP 代码。

<?php
$last_msg_id=$_GET['last_msg_id'];
$sql=mysql_query("SELECT * FROM messages WHERE mes_id < '$last_msg_id' ORDER BY mes_id DESC LIMIT 5");
$last_msg_id="";
while($row=mysql_fetch_array($sql))
{
$msgID= $row['mes_id'];
$msg= $row['msg']; 
?>
<div id="<?php echo $msgID; ?>" class="message_box" > 
<?php echo $msg; 
?>
</div>
<?php
} 
?>

CSS

body
{
font-family:'Georgia',Times New Roman, Times, serif;
font-size:18px;
}
.message_box
{
height:60px;
width:600px; 
border:dashed 1px #48B1D9; 
padding:5px ;
}
#last_msg_loader
{
text-align: right;
width: 920px;
margin: -125px auto 0 auto;
}
.number
{
float:right; 
background-color:#48B1D9; 
color:#000; 
font-weight:bold;
}

查看live demo 并向下滚动。

问候, 伊万

【讨论】:

    【解决方案2】:

    查看http://jscroll.com/ 或只是在谷歌上搜索“滚动时jQuery 加载内容”或“jQuery 无限滚动”以获得其他选择。

    【讨论】:

    • 参考文献不符合我的要求
    • 对不起伙计,半小时前试图发布一个详细的答案。但是 Stackoverflow 告诉我,由于未知错误,我的答案无法更新。
    • 别说对不起,没关系。
    猜你喜欢
    • 1970-01-01
    • 2018-05-22
    • 1970-01-01
    • 1970-01-01
    • 2013-03-15
    • 1970-01-01
    • 2019-08-13
    • 1970-01-01
    • 2011-10-04
    相关资源
    最近更新 更多