如何使用 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>        {% for u in user_details %}          {% if u.id == 2 or u.id == 1 %}            <a  href="/deletepost?author={{p.post_author}}&postid={{p.id}}" class="dropdown-item"> <i class="icon-trash"></i> Delete Post</a>          {% endif %}        {% endfor %}      </div>    </div>  </div></div>

Answer 1

添加一个last id为$lastid的变量，并在post加载时将其覆盖，并将$lastid设置为last post的数据库id，然后选择一个id大于$lastid的post。这种方法也快速高效。

<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：

<?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

} 

?>