Как я могу загрузить больше контента из базы данных, используя 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');
        }
    });

Но я не знаю, является ли это наилучшей практикой, хотя сейчас она мне подходит, но я верю, что в будущем у меня могут возникнуть проблемы с загрузкой Я думаю, что моя страница может стать очень медленной при загрузке.

Я использую движок шаблонов веток, поэтому я не могу вывести данные из моего внутреннего сценария и отображать с помощью 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>

<div class="card-body pl-0 pr-0 pb-0">
  <div class="mx-3 my-2">

      <a href="/article/{{p.id}}/{{p.post_name}}/{{ base64_encode('true') }}" class="dark-link">
        <span class="h5 mb-2 font-weight-bold">{{ p.post_title |clean_special_char |truncate(100) |raw }}</span>
      </a>
      <article class="truncate">
        {{ html_entity_decode(p.post_content) |clean_special_char |raw |nl2br }}
      </article>

  </div>

  {% if p.post_media != '' %}
  <div class="">
    <img alt="{{p.post_title}} image" src="{{ p.post_media }}" class="img-fluid" data-action="zoom" />
  </div>
  {% endif %}

  <hr class="my-1 mx-5">

  {% include "/pages/inner/like-buttons.html" %}

</div>

Могу ли я получить какую-либо помощь или идею о том, что делать в этой ситуации. У меня уже есть приложение, работающее онлайн, вы можете посмотреть здесь , чтобы лучше понять, что я имею в виду.

Answer 1

Добавьте переменную с последним идентификатором $ lastid и переопределите ее при загрузке сообщения и установите $ lastid в качестве идентификатора базы данных последнего сообщения, затем выберите сообщение, идентификатор которого больше этого $ 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:

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