写评论功能收获到的知识点以及thymeleaf提交表单实现分页

最新推荐文章于 2023-08-10 23:01:36 发布

小王没脑袋

最新推荐文章于 2023-08-10 23:01:36 发布

阅读量77

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/wzy0507/article/details/131028571

版权

学习总结

**
这次项目实现了一个二级评论是集合里面套集合需要判断是不是子评论也需要将数据放到点击函数里面
1写参数将数据放入到一个隐藏的盒子里对数据进行操作

 <div class="userWord ClearFloat">
                                    <!-- 用户自己的 -->
                                    <a class="usermessage" href="../users/personalSpace?userId=${result.data[i].userId}">
                                        <span class="userID">${result.data[i].nickname}:<span class="userIDcontain">${result.data[i].content}</span></span>
                                   <div><button name="${result.data[i].id}" class="delectYoursComment" onclick="delectComments(this)">删除<button></div>
                                    </a>
                                    <div class="commentBtn">
                                        <i class="iconfont iconfontComment"style="font-size:19px;" class="returnComment" onclick="returnOthersmessage(this)">&#xe630;</i>
                                        <i class="iconfont iconfontComments" style="font-size:19px;">&#xe652;</i>
                                        <span class="thumbsUPnum"></span>
 //将要获取的id放到隐藏的盒子里再通过元素之间的关系去读取要获取的id值
                                        <span style="display: none">${result.data[i].id}</span>
                                    </div>

                                </div>
                                
                            </div>

直接传递this值给它取name

 <div><button name="${result.data[i].id}" class="delectYoursComment" onclick="delectComments(this)">删除<button></div>

function delectComments(obj){
    console.log(obj.name);
    const delectCommentsUrl=`../comment/deleteComment?commentId=${obj.name}`
    alert("提示","确认删除？");
    $.ajax({
        type: "DELETE",
        url:delectCommentsUrl,
        data:{

        },
        success: function (result) {
            if(result.code==20021){
                alert("恭喜",'删除成功');
                //通过父元素去删除子元素
                const targetobj=obj.parentNode.parentNode.parentNode.parentNode;
                const targetobjParebt=targetobj.parentNode;

                targetobjParebt.removeChild(targetobj);
            }
            else{
             alert('提示','删除不成功')
            }
        },
        error: function (err) {
            console.log(err)
        }
    })


}

然后用原生的写了一个alert弹窗

function alert(title,message) {
    alertBox.style.display = 'block';
    alertBlackbigBox.style.display='block';
    this.message=message;
    this.title=title;
    titleConten.innerHTML=title;
    alertConten.innerHTML=message;

}
let suredelectAlect=document.getElementById("suredelectAlect");
suredelectAlect.onclick= function hideAlert() {
    titleConten.innerHTML='';
    alertConten.innerHTML='';
    alertBlackbigBox.style.display='none'
    alertBox.style.display = 'none';
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert弹窗</title>
</head>
<style>
    /*样式*/
    * {
        margin: 0;
        padding: 0;
    }

    .alertBox {
        display: none;
        width: 400px;
        height: 180px;
        border: 1px solid #EEE;
        background-color: white;
        border-radius: 10px;
        position: absolute;
        float: none;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .titleConten {
        height: 40px;
        padding-left: 20px;
        font-size: 18px;
        font-weight: bold;
        line-height: 40px;
        background-color: #adc4d9;
        border-radius: 10px 10px 0 0;
        color: #FFF;
    }

    #alertConten {
        height: 100px;
        text-align: center;
        color: #FFF;
        line-height: 100px;
        color: black;
    }

    .bottom {
        height: 40px;
        text-align: center;
        border-top: 1px solid #adc4d9;
    }

    .bottom span {
        margin-top: 5px;
        display: inline-block;
        width: 100px;
        height: 30px;
        border-radius: 8px;
        text-align: center;
        line-height: 30px;
    }

    #alertBlackbigBox {
        width: 100%;
        height: 100%;
        position: fixed;
        background-color: rgba(219, 219, 222, 0.5);
        z-index: 20;
    }

</style>
<body>
<div id="alertBlackbigBox" style="display: none;">
    <div class="alertBox" style="display: none;">
        <p class="titleConten" id="titleConten"></p>
        <div id="alertConten"></div>
        <div class="bottom">
            <span id="suredelectAlect">确定</span>
        </div>
    </div>
</div>
</body>
</html>

thymeleaf提交表单实现分页
因为每翻页就会重新刷新页面所以点击的时候需要将页面的参数进行改变
代码如下

  <form th:action="@{/CommodityController/getCommodityPagination}" method="GET" id="myformgoods" style="display: none">
                <input name="commodityNum" value="12" style="display: none">
                <input name="pageNum" value="1" style="display: none" id="formPagennum">

            </form>

   function aaa() {
        let url = location.search;
        if (url.indexOf("?") !== -1) {
            let str = url.substr(1);
            let strs = str.split("&");
            let strss = strs[1].split("=");
            pagenum=strss[1].replace(/(^#*)/g, '');
            console.log(pagenum)
            document.getElementById('numpage').innerHTML=pagenum;
        }
    }
    aaa();
//切割参数 改变参数的值
let upchange=document.getElementById("upchange");
upchange.onclick=function (){
    if(numpage.innerHTML==1){
        alert('提醒',"这是第一页");

    }
    else{
            pagenum--;
        // numpage.innerHTML;
     document.getElementById("formPagennum").value=pagenum;
        document.getElementById("myformgoods").submit();
    }
}

生活总结

**
马上要期末考试了也要重视重视学校的课天天开心！！

小王没脑袋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
写评论功能收获到的知识点以及thymeleaf提交表单实现分页

*这次项目实现了一个二级评论是集合里面套集合需要判断是不是子评论也需要将数据放到点击函数里面1写参数将数据放入到一个隐藏的盒子里对数据进行操作-- 用户自己的 -- > < a class = "usermessage" href = "../users/personalSpace?
复制链接

扫一扫