如何使用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>&nbsp; &nbsp; &nbsp; &nbsp; var lastid = 1;&nbsp; &nbsp; &nbsp; &nbsp; function fetchpost() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $.ajax({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; url:"getPosts.php?lastid="+lastid, //the page containing getting post code&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; type: "post",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; dataType: 'json',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; data: '',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; success:function(result){&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $("#posts_parent").after(result);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Getting id of last post using :last&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; lastid = $("posts_parent:last").attr("id");&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;});&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;}&nbsp; &nbsp; <script>&nbsp; &nbsp; <div id="posts_parent">&nbsp; &nbsp; </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&nbsp; LIMIT 10"); // Limit 10, only 10 posts will be fetchedwhile($row=mysql_fetch_array($sql)){&nbsp; &nbsp; $id= $row['id'];&nbsp; &nbsp; $postDiscription = $row['disc'];?>&nbsp; &nbsp; <div id="<?php echo $id; ?>">&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;<?php echo $postDiscription; ?>&nbsp; &nbsp; </div>&nbsp;<?php}&nbsp;?>