查看剩余留言效果ajax+php

最新推荐文章于 2024-06-12 20:02:29 发布

黑桃爱上红心

最新推荐文章于 2024-06-12 20:02:29 发布

阅读量161

点赞数 1

本文链接：https://blog.csdn.net/qq_42669760/article/details/85366331

版权

先来个码源地址表示诚意https://github.com/windows99/one.git

大致截个图，效果应该都很明显了，点击继续查看xx条回复，点一次多显示十条，只到显示完；

显示完还有一个收起回复，如图：

ps:(可以发现最后一条评论和收起回答有一些距离，这是因为php里写的点一次就多十条数据，每天数据后面有一个br，最后那一下不够10条数据但是br是固定的，暂时还没想到什么判断可以接受，求大佬指点)；

文件：

css/style.css 简单的样式

js/script.js 主要的ajax代码

index.php 主页

data.php ajax调用的php

ajax.sql.zip 测试数据，解压到自己mysql就不用说吧

index.php

<?php
//链接数据库
$sql = mysqli_connect('localhost','root','root','ajax') or die ('数据库加载失败');
//确认编码
mysqli_query($sql,'set names utf8');
//假设进入商品id为1的商品问答页面
$shop_id = 1;
//查询question中针对商品id为1的问题
$question = mysqli_query($sql,"SELECT * FROM `question` WHERE `shop_id` =$shop_id");
//查询有多少条数据
$questionlenght = mysqli_num_rows($question);
session_start();
?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="panel panel-default">
            <div class="panel-body">商品问答</div>
        </div>
        <div class="top">
            <span>心中疑惑就来问问买的人把</span>
            <button type="button" class="btn btn-danger">点击提问</button>
        </div>
        <div class="content">
            <?php
            //for循环
            for($i =0;$i <$questionlenght;$i ++){
                $questioncon = mysqli_fetch_assoc($question);  //输出
                $question_id = $questioncon['id'];
                $question_title = $questioncon['title'];
            ?>
            <div class="con">
                <div class="con_top">
                    <span>问</span><?php echo $question_title; ?><br>
                    <span>答</span><?php
                    $answer = mysqli_query($sql,"SELECT * FROM `answer` WHERE `question_id` =$question_id");
                    $answerlenght = mysqli_num_rows($answer);
                    $answercon = mysqli_fetch_assoc($answer);
                    $answer_title = $answercon['title'];
                    echo $answer_title;
                    ?>
                    <div class="con_middle"></div>
                </div>
                <?php
                $q =1;
                if($q == 1){
                    // 存储 session 数据
                    $_SESSION['num'.$question_id]=0;
                    $q++;
                }
                ?>
                <a href="javascript:;" class="look" onclick="see(<?php echo $question_id;?>,<?php echo $i;?>)">
                    继续查看<?php echo $answerlenght-1;?>条回复
                </a>
            </div>
            <?php
            }
            ?>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

data.php

<?php
//链接数据库
$sql = mysqli_connect('localhost','root','root','ajax') or die ('数据库加载失败');
//确认编码
mysqli_query($sql,'set names utf8');
//获取要加载的id
$id = $_GET['id'];

//开启存储
session_start();
// 存储 session 数据
$num = $_SESSION['num'.$id];
$num++;
$number = $num * 10;
$_SESSION['num'.$id]=$num;
$answer = mysqli_query($sql,"SELECT * FROM `answer` WHERE `question_id` =$id");
$answerlenght = mysqli_num_rows($answer);
$show = 10;
if($number-$show > $answerlenght){
    $_SESSION['num'.$id]=0;
    echo '[{ "num":"'.$num.'"},{ "lenght":"'.$answerlenght.'"}]';
}else{
    echo '[{ "num":"'.$num.'"},{ "lenght":"'.$answerlenght.'"},{"title":"';
    for($i =0;$i <$number;$i ++){
        $answercon = mysqli_fetch_assoc($answer);
        $answer_title = $answercon['title'];
        if($i!=0){
            echo $answer_title;
            echo "<br>";
        }
    }
    echo '"}]';
}


?>

script.js


function see(e,i) {


    $.ajax({
        url:"data.php?id="+e,
        type: "get",
        success: function (returnValue) {
            var data = eval('(' + returnValue + ')');
            console.log(data)
            var num = data[0]['num'];
            var lenght = data[1]['lenght']- 1;
            var number = lenght  - num*10;
            if( $('.look').eq(i)[0].innerHTML == '收起回答'){
                console.log( $('.con_middle').eq(i).html(''))
                $('.con_middle').eq(i).innerHTML='0';
                $('.look').eq(i)[0].innerHTML = '继续查看'+lenght+'条回复';
                return;
            }
            $('.con_middle').eq(i).html(data[2]['title']);
            if(number<=0){
                $('.look').eq(i)[0].innerHTML = '收起回答';
            }else {
                $('.look').eq(i)[0].innerHTML = '继续查看'+number+'条回复';
            }

        },
        error: function (returnValue) {
            alert("对不起！数据加载失败！");
        }
    })
}

style.css

.top{
    text-align: center;
}
.con{
    width: 100%;
    border-bottom: 1px solid black;
}
.con span{
    width: 20px;
    background: red;
    display: inline-block;
    line-height: 20px;
    text-align: center;
    color: white;
    font-size: 12px;
    border-radius: 10px;
    margin: 10px 10px 10px 0;
}
.con span:nth-child(3){
    background: blue;
}
.con_middle{
    margin-left: 30px;
    line-height: 30px;
}

黑桃爱上红心

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
查看剩余留言效果ajax+php

先来个码源地址表示诚意https://github.com/windows99/one.git大致截个图，效果应该都很明显了，点击继续查看xx条回复，点一次多显示十条，只到显示完；显示完还有一个收起回复，如图：ps:(可以发现最后一条评论和收起回答有一些距离，这是因为php里写的点一次就多十条数据，每天数据后面有一个br，最后那一下不够10条数据但是br是固定的，暂时还没想到什么判...
复制链接

扫一扫