Question

我有一个正在显示的数据或“引号”列表，我只限制了10个，但我想要更多展示....

<ul class="recent-list">
  <?php 
    require("inc/connect.php");
    $result = mysql_query("SELECT * FROM entries ORDER BY id DESC LIMIT 0, 20", $link);
    while($row = mysql_fetch_array($result)){
  ?>

    <li id="<?php echo $row['id']; ?>" class="quote-wrap group">
      <span>
        some stuff here....           
      </span>

      <div class="quote">

        <p>
          <?php echo htmlentities($row['quote']); ?>
        </p>

      </div><!-- /.quote -->
    </li>

  <?php } ?>
</ul>

然后在列表的底部，有一个“显示更多”链接，其中显示的数据消失，下一组数据出现。

我想我理解“ajax”部分。它看起来像这样。

$(document).delegate("'#load-more'", "click", function(){


        $.post("load-more.php", $(this).serialize(), function(data) {
                   // success?
   });
});

其中load-more.php是我需要创建的文件，用于加载更多数据，并运行mysql查询。那部分令我感到困惑。

单击“显示更多”链接后，如何使用PHP获取下一组数据？我是PHP和ajax的新手，所以这对我来说很难。

Answer 1

OK！首先要做的是创建一个外部PHP文件，其中包含从数据库中获取数据的代码。

此文件应该能够传递$ _POST或$ _GET变量以及要从中查询记录的起始索引。看起来应该是这样的：

require("inc/connect.php");
$start = $_GET['start'];
$limit = $_GET['limit'];

我们定义$ start变量，它将保存应在查询中返回的第一个ID的值。然后是$ limit变量，它保存从数据库中获取的行数。

$result = 
mysql_query("SELECT * FROM entries ORDER BY id DESC LIMIT $start, $limit", $link);

然后我们使用这些变量构造并执行查询。在这个阶段，它开始变得更复杂。

$data = array(); //We create an empty array to store the new values in.

while($row = mysql_fetch_array($result)){//Then we loop through the return results.
    //Each row variable is an object, should have two properties
    // $row['id'] & $row['quote']
    // So we add this object into our $data array.
    array_push($data, $record);
}
//Now PHP works some of it's magic and turns that $data array into something 
//that javascript can understand. A JSON string.
echo(json_encode($data));

当Javascript使用它的AJAX调用读取该字符串时，它将能够将其转换回对象数组，这些对象仍然具有$ row变量具有的属性。但是在Javascript中，我们使用.property而不是引用具有['property']或 - ＆gt;属性语法的对象的属性，而不是PHP。我们使用.property。

我在这里很勇敢，我不知道你是否听说过很多关于JSON的内容，但如果你环顾四周，它会在互联网上得到很多支持。理解它是非常有用的。基本上我们刚刚使用PHP来创建一个对象数组，其中包含属性id和quote。然后我们将其作为JSON字符串回显。

所以，如果我们转到这个网址：

http://localhost/quotes.php?start=0&limit=10

然后我们应该看到一个看起来像这样的页面：

[
    {
        "id":0,
        "quote":"The first quote."
    },
    {
        "id":1,
        "quote":"The second quote."
    },
    {
        "id":2,
        "quote":"The third quote."
    },
    ...
]

现在它的格式不会很好，但如果你通过JSON格式化程序运行它（google it）。然后它应该类似于那样的东西。在继续之前确保它有效！

然后，我将从您的页面中删除嵌入式PHP，并使用刚刚编写的PHP脚本使用AJAX获取所有内容。

接下来，创建一个向PHP文件发送AJAX请求的jQuery函数。类似的东西：

function getQuotes(start, limit) {
    //Clear the recent list element
    $(".recent-list").html("");
    $.ajax({
        url:"http://localhost/quotes.php?start="+start+"&limit="+limit,
        success: function (data) {
            data = eval(data);
            //Data should now be a javascript array of objects.
            for(i=0;i<data.length;i++) {
                $(".recent-list").append("<li id='"+data[i].id+"' class='quote-wrap-group'><li>");
                $("#"+i).html("<div class='quote'><p>"+data[i].quote+"</p></div>");
            }
        }
    });
}

我知道最后一个函数看起来有点令人困惑，对PHP页面发出了AJAX请求，数据被收集并变成一个数组。我们循环遍历数组，并以与之前配置的方式相同的方式将值插入页面。

如果在名为currentIndex的变量中包含当前索引，则可以知道接下来请求的索引。您可以使用此变量来确定哪个是下拉的下一个索引，例如

getQuotes(currentIndex+10, 10);

这些都可以与页面上的某个按钮链接在一起，例如

<button id="more">Get more quotes</button>

然后在您的Javascript部分的顶部：

$(document).ready(function(){
    $("more").click(function(){
        getQuotes(currentIndex+10, 10);
        currentIndex += 10;
    });
});

这会创建一个函数，这样无论何时单击按钮，都会从中删除旧结果并添加新结果，同时递增currentIndex以使其保持正确。

虽然这看起来像是一种复杂的方法，但如果你学习这种技术，它将在调试和未来项目方面简化很多。所以值得坚持这一点，看看你是否能让它发挥作用。

我要注意的另一件事是，如果这些数据是敏感的，那么你应该使用$ _POST变量（jQuery仍支持它们），如果有大量数据，你应该限制PHP文件中的限制。

最后，所有这些代码都是用Stack Overflow编写的，不在我的脑海中，所以可能出现了问题。我希望你能把这个排序好，我希望这对你有所帮助！

从数据库中获取更多数据

1 个答案: