如何使用Jquery或Ajax从数据库加载更多内容

Question

我正在开发一个像quora这样的社交网站，当你拖到页面底部时，新内容就会加载。但是在我的应用程序中，我的页面将具有不同的按钮而不是滚动。每当用户点击“更多”按钮时，新内容都会在底部加载。在我的PHP代码中，我无限制地从数据库中获取所有内容，然后使用jQuery来切片，并使我的页面加载更多项目，就像这样。$("#loadMore").on('click', function (e) {        e.preventDefault();        $(".more:hidden").slice(0, 10).slideDown();        if ($(".more:hidden").length == 0) {            $("#loadMore").fadeOut('slow');        }    });但我不知道这是否是最佳实践，尽管它现在对我很好，但我相信将来我可能会遇到加载页面的困难，我认为我的页面在加载时可能会变得非常慢。我使用 twig 模板引擎，因此我无法从后端脚本中回显数据并使用 ajax 进行显示因为我的前端看起来像这样。<div class="card blogBox moreBox" id="single_user_card"><div class="card-header card-header-borderless d-flex justify-content-between">  <div class="text-small ">      <ul class="list-inline">        <li class="list-inline-item">          <img alt="Image" src="{{ p.author_avatar }}" class="avatar avatar-sm" />        </li>          <li class="list-inline-item font-weight-bold"> {{ p.author_username |title |raw }}            <p class="text-muted text-small post-time font-weight-light">{{ p.post_date |time_diff }}</p>          </li>          <li class=""></li>      </ul>  </div>  <div class="d-lg-flex justify-content-end">    <div class="dropdown">      <a class="dark-link" href="#" id="share_dropdown_menu" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">        <i class="icon-menu"></i>      </a>      <div class="dropdown-menu" aria-labelledby="share_dropdown_menu">        <span postid="{{APPURL}}/article/{{p.id}}/{{p.post_name}}/{{ base64_encode('this token is valid for one hour') }}">          <a href="javascript:void(0);" class="dropdown-item copy_link">            <i class="icon-share"></i> Copy link          </a>        </span>在这种情况下，我可以获得任何帮助或想法吗？我已经有应用程序在线运行，你可以看看这里，以更好地理解我的意思。

Answer 1

添加一个$lastid的上一个 id 变量，并在加载帖子时覆盖它，并将$lastid设置为最后一个帖子的数据库 ID，然后选择一个 id 大于该$lastid的帖子。这种方法也是快速有效的。

<script>

        var lastid = 1;

        function fetchpost() {

              $.ajax({

                url:"getPosts.php?lastid="+lastid, //the page containing getting post code

                type: "post",

                dataType: 'json',

                data: '',

                success:function(result){  

                  $("#posts_parent").after(result);

                  //Getting id of last post using :last

                  lastid = $("posts_parent:last").attr("id");

               }

             });

         }

    <script>

    <div id="posts_parent">

    </div>

<button onlclick="fetchpost()">Fetch New Posts</button> //Button fetches new posts

菲律宾比索：

<?php

$lastidofpost = $GET['lastid'];

$sql=mysql_query("SELECT * FROM posts ORDER BY id DESC WHERE id > $lastidofpost  LIMIT 10"); // Limit 10, only 10 posts will be fetched

while($row=mysql_fetch_array($sql))

{

    $id= $row['id'];

    $postDiscription = $row['disc'];

?>

    <div id="<?php echo $id; ?>"> 

       <?php echo $postDiscription; ?>

    </div> 

<?php

} 

?>