Question

我正在使用PHP创建一个活动网站。我有一个带有“事件”表的数据库，其中包含 id ，标题和日期（Y-m-d）。

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

我希望能够一次又一次地显示“更多”，以便每次用户点击它时，在前面的事件下面会显示30个以上的事件（比如在{{3时向下滚动时会发生什么） }}）。

不幸的是，我的“更多”按钮第一次工作（从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>

and 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后，你会得到另一个$（文件）.ready（），它将另一个点击事件绑定到所有匹配“更多”的标签，所以现在你加载的数量超过你再次点击时的预期

你应该做的第一件事是不要在你的more.php中包含javascript。如果我理解你要完成的任务，那么你要做的就是更改你的点击事件以创建一个新的＆lt; div＆gt;，在其上调用jQuery的加载函数，并将其附加到文档中的somwhere。它可能看起来像这样：

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

我还强烈建议不要制作像＆lt; more＆gt;这样的新标签。浏览器不知道如何处理它，所以你不能确定如何渲染它，如果有的话。你可以使用＆lt; div＆gt;在这些情况下，必要时给它一个ID或类。

此外，如果您在同一天有多个事件，则选择下一个要显示的事件的算法将失败。你真正想做的就是跟踪你想在查询中作为LIMIT子句的一部分使用的偏移值。

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

2 个答案: