“更多”按钮使用AJAX和PHP

Question

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

我的索引页面按日期顺序显示从今天开始的前30个事件。当您点击“更多”时，通过AJAX显示30个更多事件。 AJAX加载more.php在index.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> 

而且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;  
?> 

而且，很可能，当有数据库没有记录，你应该添加的方式来阻止这种扩张。

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

Answer 2

当你使用jQuery的加载函数时，你只能替换元素和它的结束标记之间的内容。在您的AJAX加载后，您在index.php文档中设置的JavaScript仍然存在。所以每次你点击你的按钮时，你都会得到一个重复执行的JavaScript代码。当来自more.php的新javascript被加载时，你会得到另一个$（document）.ready（），它将另一个点击事件绑定到与“more”匹配的所有标签，所以现在当你再次点击时你加载的比你想象的要多得多。

你应该做的第一件事就是不要在你的more.php中包含javascript。如果我明白你要完成的任务，那么你需要改变你的点击事件来创建一个新的<div>，调用jQuery的加载函数，并将它附加到你的文档中。它可能是这个样子：

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

我也强烈建议不要做了一个新的标签一样<更多>。浏览器不知道如何处理它，所以你不能确定它将如何呈现，如果有的话。您可以在这些情况下只使用<div>，并根据需要为其提供ID或课程。

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