如何使用 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>&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 postsPHP：<?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;?>