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

时间:2015-09-30 02:07:36

标签: php jquery mysql ajax

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

main.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>
            ";
?>

2 个答案:

答案 0 :(得分:0)

您应该将查询更改为此

$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必须括在括号中....

答案 1 :(得分:0)

您可以按照以下技术加载更多数据,只需替换morebox html。

blog.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>

ajax_more.php

{{1}}