Question

我正在尝试使用无限滚动将下5个内容加载到我的屏幕上而不重新加载整个页面。我已经尝试了大约一百万件事。我有滚动条跟踪工作很好，但我不知道如何设置ajax请求加载滚动条脚本激活时的其他内容。请帮助我坚持了两天。

这是我的java脚本：

    <script type="text/javascript">
    function yHandler(){
var wrap = document.getElementById('wrap');
var contentHeight = wrap.offsetHeight;
var yOffset = window.pageYOffset; 
var y = yOffset + window.innerHeight;
if(y >= contentHeight){
    // Ajax call to get more dynamic data goes here
    wrap.innerHTML += '<div class="newData"></div>';
}
var status = document.getElementById('status');
status.innerHTML = contentHeight+" | "+y;
}

window.onscroll = yHandler;
</script>

这是我的php文件连接到我的数据库：

    <?php

    # FileName="Connection_php_mysql.htm"
    # Type="MYSQL"
    # HTTP="true"
    $hostname_dbConn = "localhost";
    $database_dbConn = "Video";
    $username_dbConn = "root";
    $password_dbConn = "root";
    $dbConn = mysql_pconnect($hostname_dbConn, $username_dbConn, $password_dbConn) or trigger_error(mysql_error(),E_USER_ERROR); 

    ?>

Answer 1

注意：正如其他评论者所指出的那样，将各个部分组合在一起会有更好的画面，但这至少可以让你走上正确的轨道。

问题非常广泛但是对于AJAX位使用jQuery！我可以想到最简单的事情而不会涉及太多细节。

JS

var last_grabbed = 5;
function scrollListen() {
    ...
    $.post('path/to/script.php',{ 'last_row' : last_grabbed },function(response) {
        $('.my-content-div').append(response);
        last_grabbed += 5;
    });
}

PHP

<?php
//your connection stuff, db select, etc
$row = $_POST['last_row']; //you should sanitize this though
$rs = mysql_query("SELECT ... LIMIT $row,5") or die(mysql_error());
while($row = mysql_fetch_assoc($rs)) {
?>
<!-- Do you HTML stuff here for each item !-->
<?php
}
?>

这应该让你开始。 http://www.w3schools.com/php/php_mysql_intro.asp有关PHP方面的更多信息。

使用无限滚动来加载更多内容并扩展页面？

1 个答案:

JS

PHP