使用 AJAX 和 PHP 的“更多”按钮

Question

我正在使用 PHP 创建一个活动网站。我有一个包含 id、title 和 date (Y-m-d) 的“事件”表的数据库。

我的索引页面按日期顺序显示从今天开始的前 30 个事件。当您单击“更多”时，将通过 AJAX 显示另外 30 个事件。 AJAX 在 index.php 中加载 more.php，index.php 通过 PHP 会话将最新的 id/date 传递给 more.php。

我希望能够一次又一次地显示“更多”，这样每次用户点击它时，之前的事件下方就会显示 30 多个事件（就像您一直向下滚动到 Twitter 时会发生的情况一样)。

不幸的是，我的“更多”按钮第一次工作（从 index.php 中单击时），但是当在 more.php 中单击时，快速循环一次又一次地遍历 id/date 变量，直到不再有事件离开。

如何通过 AJAX 创建我想要的更多按钮？

以下是 index.php 中的相关代码：

<!-- "More" button JavaScript. Loads 10 more events when clicked -->
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("more").click(function(){
      $("more").load('more.php');
    });
  });
</script>

<?php
  session_start();
  $today = date('Y-m-d');
  $result = mysql_query("SELECT * FROM events WHERE date>='$today' ORDER BY date LIMIT 0, 30");
  while($row = mysql_fetch_array($result))
    {
    echo $row['id'];
    echo $row['title'];
    echo $row['date'];
    echo "<br />";
    // Grabs date/id of last event echoed
$nId = $row['id'];
$nDate = $row['date'];
    }
  // Sends last date/id echoed to more.php
  $_SESSION['nDate']=$nDate;
  $_SESSION['nId']=$nId;    
?>
<!-- This more tag seems to work with my JavaScript -->
<more>More</more>

还有more.php：

<!-- "More" button JavaScript. Loads 30 more events when clicked -->
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("more").click(function(){
      $("more").load('more.php');
    });
  });
</script>

<?php
  session_start();
  $nId = $_SESSION['nId'];
  $nDate = $_SESSION['nDate'];
  $result = mysql_query("SELECT * FROM events WHERE date>='$nDate' && id>='$nId' ORDER BY date LIMIT 1, 30");
  while($row = mysql_fetch_array($result))
    {
    echo $row['id'];
    echo $row['title'];
    echo $row['date'];
    echo "<br />";
    $nId = $row['id'];
    $nDate = $row['date'];
    }   
  $_SESSION['nDate']=$nDate;
  $_SESSION['nId']=$nId;    
?>
<more>More</more>

非常感谢各位:)

Answer 1

这里有多余的不需要的数据。试试这个例子。

index.php:

<?php  
// THAT SHOULD BE BEFORE ANY OUTPUT IS SENT TO THE BROWSER
    session_start();  
?>
<!-- "More" button JavaScript. Loads 10 more events when clicked -->
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript">
  $(document).ready(function(){
    $("more").click(function(){
      $('<div style="display:none;"/>').insertBefore($(this))
              .load('more.php', function(){$(this).slideDown();});
    });
  });
</script>

<?php
include('more.php');  
?>
<!-- This more tag seems to work with my JavaScript -->
<more>More</more>

还有更多.php：

<?php
  // include here some code for connection to DB
  if (!isset($_SESSION)) 
  {
      session_start();
      $nId = $_SESSION['nId'];
      $nDate = $_SESSION['nDate'];
      $result = mysql_query("SELECT * FROM events WHERE date>='$nDate' && 
                            id>='$nId' ORDER BY date LIMIT 1, 30");      
  }
  else
  {
      $today = date('Y-m-d');
      $result = mysql_query("SELECT * FROM events WHERE date>='$today' 
                         ORDER BY date LIMIT 0, 30");
  }

  while($row = mysql_fetch_array($result))
    {
    echo $row['id'];
    echo $row['title'];
    echo $row['date'];
    echo "<br />";
    $nId = $row['id'];
    $nDate = $row['date'];
    }   
  $_SESSION['nDate']=$nDate;
  $_SESSION['nId']=$nId;    
?>

而且，当 db 中没有更多记录时，您可能应该添加停止这种扩展的方法。

ps：为什么需要非标准标签more？例如，使用<div id='more'>More</div>。然后您的$("more") 将更改为$("#more")。

Answer 2

当你使用 jQuery 的加载函数时，你只是替换了元素和它的结束标签之间的内容。在 AJAX 加载后，您在 index.php 文档中设置的 javascript 仍然存在。因此，每次您单击按钮时，您都会再次执行 javascript 代码的副本。当加载来自 more.php 的新 javascript 时，您会得到另一个 $(document).ready() ，它将另一个单击事件绑定到与“更多”匹配的所有标签，所以现在您加载的内容比您再次单击时预期的要多得多.

您应该做的第一件事是不要在 more.php 中包含 javascript。如果我了解您要完成的下一件事，您将要做的就是更改单击事件以创建一个新的

，在其上调用 jQuery 的加载函数，并将其附加到文档中的某个位置。它可能看起来像这样：

$("more").click( function() {
  $("body").append( $("<div>").load("mode.php") );
} );

我也强烈建议不要制作像 这样的新标签。浏览器将不知道如何处理它，因此您无法确定它将如何呈现（如果有的话）。在这些情况下，您可以只使用

并根据需要为其指定 ID 或类。

此外，如果您在同一天有多个活动，那么您选择接下来要显示哪些活动的算法将会失败。您真正想要做的只是跟踪您想要用作查询中 LIMIT 子句的一部分的偏移值。

【讨论】：

• 我要将我的 标签更改为 div。感谢您的提示:)