使用 AJAX 帖子在滚动时从 MySQL 加载内容

Question

我的网站有一段需要在用户到达底部时动态加载内容。我正在使用 jQuery，这是检测滚动的代码：

$(document).ready(function() { 
    $(window).scroll(function() {
        if($(window).scrollTop() + $(window).height() == $(document).height()) {
        alert("Bottom reached");
            $('div#loadMoreComments').show();
            dataStr = "from=" + $(".n:last").attr('id')
            $.ajax({
                type: "POST",
                url: "ajax/query.php",
                data: dataStr,
                success: function(html) {
                    if(html){       
                        $("#hold").append(html);
                        alert("Data was added");
                    }
                    else{       
                        $('div#loadMoreComments').replaceWith("<center><h1 style='color:red'>End of countries !!!!!!!</h1></center>");
                        alert("Data was not added");
                    }
                }
            });
        }
    });
});

我遇到的第一个问题是只有在用户到达页面顶部时才会检测到滚动到底部。第二个问题是它根本没有加载任何内容，因为变量似乎没有发布，这是我在query.php中的代码：

if(array_key_exists('from', $_POST)) {
    $from = htmlspecialchars(stripslashes(mysql_real_escape_string($_POST['from'])));
    $to = 15;
    $re = ("SELECT status as status, sid as sid, UNIX_TIMESTAMP(timestamp) as timestamp FROM mingle_status WHERE uid = '$uid' ORDER BY timestamp DESC LIMIT $from,$to"); //query
  }
  else {
    $re = ("SELECT id as id, status as status, sid as sid, UNIX_TIMESTAMP(timestamp) as timestamp FROM mingle_status WHERE uid = '$uid' ORDER BY timestamp DESC LIMIT 1"); //query
  }
  $result = mysql_query($re) or die (mysql_error());
  while($st = mysql_fetch_assoc($result)) {
    $status = nl2br($st['status']);
    $sid = $st['sid'];  
    $td = $st['timestamp'];
    $id = $st['id'];
    ?>
        <div id="<?php echo $id; ?>" class="id">
            <!-- stuff -->
        </div>
    <?php
    }
    ?>

还有错误：

You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '",15' at line 1

如果有人能帮我解决这个问题，那就太好了，我将不胜感激。

编辑：好的，我现在可以生成一个 div，但只有当我滚动到页面顶部时，它只会附加一个 div，如果我再次滚动到顶部，它附加了完全相同的 div。

Answer 1

这是错误的：

$from = htmlspecialchars(stripslashes(mysql_real_escape_string($_POST['from'])));

如果from 应该是一个整数，只需使用：

$from = (int) $_POST['from'];

我还看到该数字来自 html 中的 id，而 ids 不能以数字开头。

编辑： 另一个问题是，如果 from 存在，您没有在 sql 查询中选择 ID，即使您这样做，这种方法可能会在将来导致问题您删除了记录，您的 ID 不再连续。

关于第一个问题，我可以在firebug更改中解决：

 if($(window).scrollTop() + $(window).height() == $(document).height()) {

到：

 if( ($(window).scrollTop() + $(window).height()) > ($(document).height() -  10) ) {

编辑 2：要解决您的非顺序 ID 问题，最简单的方法是在 javascript 中使用类似的方法计算 from：

dataStr = "from=" + $(".n").length;    // just count the number of elements you are showing already