使用 AJAX/PHP/mysqli 创建加载更多按钮

Question

在下面的代码中，我尝试使用 AJAX 创建一个加载更多按钮。我有main.php，其中包括最初从数据库调用博客的 PHP 代码、一些 jQuery 代码和一个加载更多按钮。然后我有ajax_more.php，当单击加载更多时，它会从数据库中调用更多数据。加载更多按钮完美显示，单击时它们变为加载然后消失。没有其他事情发生，main.php 仍然显示我们首先调用的那两个初始博客。请查看代码并在此代码出错的地方提供帮助。

ma​​in.php

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(document).on('click', '.show_more', function () {
            var ID = $(this).attr('id');
            $('.show_more').hide();
            $('.loding').show();
            $.ajax({
                type: 'POST',
                url: 'ajax_more.php',
                data: 'id=' + ID,
                success: function (html) {
                    $('#show_more_main' + ID).remove();
                    $('.columns').append(html);
                }
            });
        });
    });
</script>

<?php
$query = "
    SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category
    FROM blogs 
        INNER JOIN categories 
            ON categories.category_id=blogs.category_id 
    WHERE category='cat1' OR category='catt2' OR category='cat3' OR category='cat4' 
    ORDER BY blogs_id desc 
    LIMIT 2
";
$result = mysqli_query($con,$query);
$rowCount = mysqli_num_rows($result);

if($rowCount > 0){
    while ($row = mysqli_fetch_assoc($result)) {
        $blogs_id = $row['blogs_id'];
        $title = $row['title'];
        $body = $row['body'];
        $posted_by = $row['posted_by'];
        $full_name = $row['full_name'];
        $bio = $row['bio'];
        $posted = $row['posted'];

        echo "
            <div class='db'>
                <h2>$title</h2>
                <p>$body</p>
                <p>$bio</p>
            </div>
        ";
?>
<div class="show_more_main" id="show_more_main<?php echo $blogs_id; ?>">
    <span id="<?php echo $blogs_id; ?>" class="show_more" title="Load more posts">Show more</span>
    <span class="loding" style="display: none;"><span class="loding_txt">Loading…</span></span>
</div>

ajax_more.php

<?php
if(isset($_POST["blogs_id"]) && !empty($_POST["blogs_id"])) {
    $query = "
        SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category 
        FROM blogs 
            INNER JOIN categories ON categories.category_id=blogs.category_id 
        WHERE category='Entertainment' OR category='Politics' OR category='Sports' OR category='Travel'
            AND blogs_id < ".$_POST['blogs_id']." 
        ORDER BY blogs_id DESC 
        LIMIT 2
    ";
    $result = mysqli_query($con,$query);
    $rowCount = mysqli_num_rows($result);
    if($rowCount > 0){
        while ($row = mysqli_fetch_assoc($result)) {
            $blogs_id = $row['blogs_id'];
            $title = $row['title'];
            $body = $row['body'];
            $posted_by = $row['posted_by'];
            $full_name = $row['full_name'];
            $bio = $row['bio'];
            $posted = $row['posted'];

            echo "
                <div class='db'>
                <h2>$title</h2>
                <p>$body</p>
                <p>$bio</p>
                </div>
            ";
?>

Answer 1

你应该把你的查询改成这个

$query = "SELECT blogs_id, title, body, posted_by, full_name, bio, posted, category FROM
 blogs INNER JOIN categories ON categories.category_id=blogs.category_id WHERE
(category='Entertainment' OR category='Politics' OR category='Sports' OR category='Travel') 
 AND blogs_id < " . $_POST['blogs_id'] . " ORDER BY blogs_id DESC LIMIT 2";

所有的 OR 必须用括号括起来......

Answer 2

您可以按照以下技术通过替换 morebox html 来加载更多数据。

blog.php

<div class="tutorial_list">
   <!-- LOAD YOUR PHP BLOG DATA -->
   <div class="loading"><img src="fb-load.gif"/></div>
   <!-- More Button here $ID values is a last post id value. -->
   <div id="show_more<?php echo $ID; ?>" class="morebox">
      <a href="#" class="show_more" id="<?php echo $ID; ?>">more</a>
   </div>
</div>

<script>
  $(document).on('click', '.show_more', function() {
  {
    var ID = $(this).attr("id");
    if (ID) {
        $('.morebox').hide();
        $('.loding').show();
        $.ajax({
            type: "POST",
            url: "ajax_more.php",
            data: "lastpost=" + ID,
            cache: false,
            success: function(html) {
                $('.loading').hide();
                $('.tutorial_list').append(html);
                $("#show_more" + ID).remove(); // removing old more button
            }
        });
    } else {
        $(".morebox").html('The End'); // no results
    }
    return false;
  });
</script>

ajax_more.php

<!-- LOAD YOUR PHP BLOG DATA WITH lastpost ID and remember to add below code for load more -->

<!-- More Button here $ID values is a last post id value. -->
<div id="show_more<?php echo $ID; ?>" class="morebox">
    <a href="#" class="show_more" id="<?php echo $ID; ?>">more</a>
</div>