spring boot 商品：一二级评论 ajax

最新推荐文章于 2024-07-21 16:41:58 发布

原创

最新推荐文章于 2024-07-21 16:41:58 发布 · 566 阅读

6 ·

CC 4.0 BY-SA版权

这篇博客介绍了如何使用Spring Boot、Thymeleaf和AJAX来实现商品的一级和二级评论功能。通过HTML页面、JavaScript、Controller和DTO的设计，实现了评论的创建和展示。在未登录状态下，点击登录会关闭窗口。在二级评论部分，通过JS代码将评论显示在前端页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图

## 一级评论效果

在这里插入图片描述

## 二级评论效果

一级评论以及二级评论初步实现

在这里插入图片描述

1.html页面实现

2.javascript

3.Controller

4.DTO

5.未登录时，点击登录后关闭窗口

二级评论中返回到前端显示的js代码

6.显示二级评论

spring boot 框架+thymeleaf渲染+ajax实现

前端 production.html

/*回复商品按钮（一级评论）*/
<!--回复-->
<input type="hidden" id="production_id" th:value="${productiondto.id}">
<textarea class="form-control comment" rows="6" id="comment_content"></textarea>
<!-- Indicates a successful or positive action -->
<button type="button" class="btn btn-success btn-comment" onclick="post()">回复</button>

/*显示二级评论按钮*/
<span class="comment-func-second" th:data-id="${comment.id}"
           onclick="secondComment(this)">

/*二级评论提交按钮*/
<button type="button" class="btn btn-success pull-right btn-seccond"
        th:data-id="${comment.id}" onclick="postsecond(this)">提交
</button>

前端 JavaScript ：
一级评论用POST
二级评论用GET

/*一/二级评论的提交*/
function commitComment(targetId, content, type) {
   
   
    $.ajax({
   
   
        type: "POST",
        url: "/comment",
        contentType: 'application/json',
        data: JSON.stringify({
   
   
            "parentId": targetId,
            "content": content,
            "type": type
        }),
        success: function (ret) {
   
   
            console.log(ret);

            if(ret.code == 2120){
   
   
                //刷新页面
                window.location.reload()