PHP小例子（5）--手动加载评论

最新推荐文章于 2024-07-21 17:13:47 发布

三哥自尊心强

最新推荐文章于 2024-07-21 17:13:47 发布

阅读量123

点赞数

分类专栏： PHP 文章标签： ajax jquery PHP

本文链接：https://blog.csdn.net/yaoguoxing/article/details/112093104

版权

PHP 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

前言：手动加载评论在国外网站（比如油管等）的评论区已经不再是通过分页进行，而是通过手工点击一个按钮或者不断下拉屏幕进行加载。其技术本质就是Ajax，并不复杂。这里算是个小练习。

代码修改自https://www.webslesson.info/2016/02/how-to-load-more-data-using-ajax-jquery.html
Bootstrap 5 + PHP 7.2
使用到的数据库叫test

--
-- Table structure for table `tbl_video`
--

CREATE TABLE IF NOT EXISTS `tbl_video` (
  `video_id` int(11) NOT NULL AUTO_INCREMENT,
  `video_title` text NOT NULL,
  PRIMARY KEY (`video_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=utf8 ;

--
-- Dumping data for table `tbl_video`
--

INSERT INTO `tbl_video` (`video_id`, `video_title`) VALUES
(1, 'How to generate simple random password in php?\r\n'),
(2, 'Create Simple Image using PHP\r\n'),
(3, 'How to check Username availability in php and MySQL using Ajax Jquery\r\n'),
(4, 'How to Insert Watermark on to Image using PHP GD Library\r\n'),
(5, 'Make SEO Friendly / Clean Url in PHP using .htaccess\r\n'),
(6, 'Live Table Add Edit Delete using Ajax Jquery in PHP Mysql\r\n'),
(7, 'How to Export MySQL data to Excel in PHP - PHP Tutorial\r\n'),
(8, 'How to Load More Data using Ajax Jquery\r\n'),
(9, 'Dynamically Add / Remove input fields in PHP with Jquery Ajax\r\n'),
(10, 'Read Excel Data and Insert into Mysql Database using PHP\r\n'),
(11, 'How to Convert Currency using Google Finance in PHP\r\n'),
(12, 'Dynamically generate a select list with jQuery, AJAX & PHP\r\n'),
(13, 'How to get Multiple Checkbox values in php\r\n'),
(14, 'Ajax Live Data Search using Jquery PHP MySql\r\n'),
(15, 'Auto Save Data using Ajax, Jquery, PHP and Mysql\r\n'),
(16, 'How to Use Ajax with PHP for login with shake effect\r\n'),
(17, 'Facebook style time ago function using PHP\r\n'),
(18, 'Upload Resize Image using Ajax Jquery PHP without Page Refresh\r\n\r\n'),
(19, 'How to Search for Exact word match FROM String using RLIKE\r\n'),
(20, 'How To Create A Show Hide Password Button using Jquery\r\n');

load_more.php

<?php  
    $connect = mysqli_connect("localhost", "root", "password", "test");  
    $sql = "SELECT * FROM tbl_video LIMIT 2";  
    $result = mysqli_query($connect, $sql);  
    $video_id = '';  
?>  
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>  


    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">

    <title>Hello, world!</title>
    </head>
    <body>
    <div class="container">  
        <div class="table-responsive ">  
            <h2 class="text-center">jQuery实现手动添加评论</h2><br />  
            <table class="table table-bordered" id="load_data_table">  
                <?php  
                while($row = mysqli_fetch_array($result))  
                {  
                ?>  
                    <tr>  
                        <td><?php echo $row["video_title"]; ?></td>  
                    </tr>  
                <?php  
                    $video_id = $row["video_id"];  
                }  
                ?>  
                <tr id="remove_row">  
                    <td><button type="button" name="btn_more" data-vid="<?php echo $video_id; ?>" id="btn_more" class="btn btn-success form-control">more</button></td>  
                </tr>  
            </table>  
        </div>  
    </div>  
   

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>

    <script>  
        $(document).ready(function(){  
            $(document).on('click', '#btn_more', function(){ 
                var last_video_id = $(this).data("vid");  
                $('#btn_more').html("加载中");  
                $.ajax({  
                        url:"load_data.php",  
                        method:"POST",  
                        data:{last_video_id:last_video_id},  
                        dataType:"text",  
                        success:function(data)  
                        {  
                            if(data != '')  
                            {  
                                $('#remove_row').remove();  
                                $('#load_data_table').append(data);  
                            }  
                            else  
                            {  
                                $('#btn_more').html("没有数据了");  
                            }  
                        }  
                });  
            });  
        });  
    </script>
    
    
  </body>
</html>

load_data.php

<?php  
    $output = '';  
    $video_id = '';  
    sleep(1);  //这里故意停一下，模拟正在传输
    $connect = mysqli_connect("localhost", "root", "password", "test");  
    $sql = "SELECT * FROM tbl_video WHERE video_id > ".$_POST['last_video_id']." LIMIT 2";  
    $result = mysqli_query($connect, $sql);  
    if($result && mysqli_num_rows($result) > 0)  
    {  
        while($row = mysqli_fetch_array($result))  
        {  
            $video_id = $row["video_id"];  
            $output .= '  
                <tbody>  
                <tr>  
                    <td>'.$row["video_title"].'</td>  
                </tr></tbody>';  
        }  
        $output .= '  
                <tbody><tr id="remove_row">  
                    <td><button type="button" name="btn_more" data-vid="'. $video_id .'" id="btn_more" class="btn btn-success form-control">加载更多</button></td>  
                </tr></tbody>  
        ';  
        echo $output;  
    }  
?>

三哥自尊心强

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
PHP小例子（5）--手动加载评论

前言：手动加载评论在国外网站（比如油管等）的评论区已经不再是通过分页进行，而是通过手工点击一个按钮或者不断下拉屏幕进行加载。其技术本质就是Ajax，并不复杂。代码修改自https://www.webslesson.info/2016/02/how-to-load-more-data-using-ajax-jquery.htmlBootstrap 5 + PHP 7.2...
复制链接

扫一扫

专栏目录