从MySQL加载内容的滚动与AJAX后 [英] Load content from MySQL on scroll with AJAX post

问题描述

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

I have a segment of my website which needs to dynamically load content when the user reaches the bottom. I'm using jQuery, and this is the code to detect the scroll:

$(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");
                    }
                }
            });
        }
    });
});

的第一个问题我已经是滚动的底部，当用户到达页面的顶部仅检测到。第二个问题是，它不会加载任何内容，在所有的，因为变量似乎并没有被公布，这是我的code。在query.php：

The first problem I have is that the scroll to the bottom is only detected when the user reaches the top of the page. The second problem is that it doesn't load any content, at all, because the variable doesn't seem to be posted, here's my code in the 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

如果有人可以帮助我，这将会是伟大的，我真的AP preciate吧。

If anyone could help me with this, it'd be great, I'd really appreciate it.

编辑：好了，现在我可以得到一个div中产生，但只有当我滚动到页面的顶部，并且只追加1格，如果我滚动到顶部再次，追加完全相同的股利。

Okay, I can now get a div generated, but only when I scroll to the top of the page, and it only appends one div, and if I scroll to the top again, it appends the exact same div.

推荐答案

这是错误的：

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

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

If from is supposed to be an integer, just use:

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

我也看到了一些来自一个ID在HTML和ID不能以数字开头。

I also see that that number comes from an id in the html and ids cannot start with a number.

编辑：的另一个问题是，你是不是从选择您的SQL查询，如果的ID存在，即使你会做的，这种方法可能会导致问题在将来，当你删除记录和你的ID不是连续的了。

An additional problem is that you are not selecting the ID in your sql query if from exists and even if you would do that, this approach can lead to problems in the future when you delete records and your IDs are not sequential any more.

关于第一个问题，我可以解决，在萤火虫变化：

About the first problem, I can solve that in firebug changing:

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

到

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

编辑2：为了解决您的非顺序编号的问题，最简单的方法是计算从在JavaScript中使用类似：

Edit 2: To solve your non-sequential ID problem, the easiest way would be to calculate from in javascript using something like:

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

这篇关于从MySQL加载内容的滚动与AJAX后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！