javascript - 在 php mysql 和 jquery 中加载更多

Question

我正在尝试为我的学校项目提供在 php 网页中加载更多帖子的选项。

这里是一些 php 代码。

    <?php
        $prj= mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
            $record = array();
            while($row = mysql_fetch_assoc($prj)){
            $record[] = $row;
            }
     foreach($record as $rec){

                <div class="col-sm-1 col-md-4" id="<?php echo $rec['cid'];?>">
                    <div class="well">
                        <div class="media services-wrap55 wow fadeInDown">

                                <h4 class="media-heading"><?php echo $rec['Project_Name'];?></h4></a>
                                <p> by <i><?php echo $rec['user_name'];?></i></p>
                                            <p> <?php echo $rec['short_dis'];?></p>
                        </div>
                    </div>
                </div>

    ?>

<?php } ?>

<div class="col-sm-1 col-md-12">
    <div class="media services-wrap55 wow fadeInDown"> 
        <center><h3 class="media-heading"><div class="more" id="more">Load More Post</div></h3></center>
    </div>
</div>

这是 javascript 代码。

$(document).ready(function(){   
    $('#more').click(function(){

        var get_last_post_display=$('li:last').attr('id'); //get ip last <li>

        $('#more').html('<img src="ajax-loader.gif");
            $.ajax({                
                type: "POST",
                url: "more_prj.php",
                data: "last_id_post="+get_last_post_display, //send id ip last <li> to more_post.php
                cache: false,
                success: function(html){

                    $('ul').append(html);

                    $('#more').text('Load More Project'); //add text "Load More Post" to button again

                    if(!html){

                    $('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
                    }                   
                }
                });
        });                 
});

我在配置代码下方的 javascript 时遇到问题。var get_last_post_display=$('li:last').attr('id');它是为 li 配置的，我想为 div 配置它。我尝试了多次但没有成功，因为我不擅长 javascript。

能否请您告诉我如何配置它。

谢谢。

Answer 1

尝试使用类名

var get_last_post_display=$('.col-sm-1.col-md-4:last').attr('id');

更新您可以使用 json，因为有时您可以获得 404 页面或其他内容，这会导致问题，使用 json 可以确定您获得了所需的内容。

更多_prj.php

<?php
$prj = mysql_query("select * from campaign where uid=$uid order by Closing_Date DESC Limit 0,1");
$result = '';
while($row = mysql_fetch_assoc($prj)) {
    $result .= '<div class="col-sm-1 col-md-4 unique-class" id="'.$row['cid'].'">
        <div class="well">
            <div class="media services-wrap55 wow fadeInDown">
                <h4 class="media-heading">'.$rec['Project_Name'].'</h4></a>
                <p> by <i>'.$rec['user_name'].'</i></p>
                <p>'.$rec['short_dis'].'</p>
            </div>
        </div>
    </div>';
}

//if($result) maybe some condition to check if you have any data?
$result .= 
'<div class="col-sm-1 col-md-12">
    <div class="media services-wrap55 wow fadeInDown"> 
        <center><h3 class="media-heading"><div class="more" id="more">Load More Post</div></h3></center>
    </div>
</div>';

echo json_encode($result);

js脚本

$(document).ready(function() {
    $('#more').click(function() {
        var get_last_post_display = $('.unique-class:last').attr('id'); //get ip last <li>
        $('#more').html('<img src="ajax-loader.gif"');
        $.post('more_prj.php', 'last_id_post='+get_last_post_display, function(html) {
            if(html) {
                $('div').append(html);//$('.main-div') ?
                $('#more').text('Load More Project'); //add text "Load More Post" to button again
            } else {
                $('#more').text('No more Project to load'); // when last record add text "No more posts to load" to button.
            }
        }, 'json');
    });
});