如何将这个spring boot百里香叶代码转换为Ajax

Question

我有一个评论和帖子系统，我想把它变成ajax而不使用胸腺叶碎片。怎么做我不知道我不想每次发表帖子或评论时都刷新页面。

控制器：

@Controller
public class DashboardController {
    private Post post;
    private User user;
    @Autowired
    private PostRepository postRepository;
    @Autowired
    private UserRepository userRepository;
    @Autowired
    CommentRepository commentRepository;

    @RequestMapping(value = "/dashboard", method = RequestMethod.GET)
    public String returnPosts(Model model) {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        String currentPrincipalName = authentication.getName(); //holding login user details

        model.addAttribute("firstName", userRepository.findByEmail(currentPrincipalName).getFirstName());
        model.addAttribute("newPost", new Post());
        model.addAttribute("newComment", new Comment());
        model.addAttribute("posts", postRepository.findAllByOrderByDateDesc());
        model.addAttribute("comments", commentRepository.findAll());


        return "main";
    }

    @RequestMapping(value = "/dashboard/posts", method = RequestMethod.POST)
    public String addPost(Model model, @ModelAttribute Post post, @ModelAttribute User user) {

        model.addAttribute("newPost", post);



            creatPost(post);
        System.out.println(post.getId());

        return "redirect:/dashboard";
    }

    @RequestMapping(value = "/dashboard/comments", method = RequestMethod.POST)
    public String addComment( Model model,  @ModelAttribute Comment comment,
                             @ModelAttribute User user) {

        model.addAttribute("newComment", comment);
       // model.addAttribute("posts", post);


        creatComment(comment.getPostId(), comment);
        System.out.println(comment.toString());
        //System.out.println(post.getId());
       // System.out.println(comment.getPostId());


        return "redirect:/dashboard";
    }

    private Comment creatComment(String id, Comment comment) {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        String currentPrincipalName = authentication.getName();
        comment.setDate(new Date());
        comment.setAuthor(userRepository.findByEmail(currentPrincipalName).getFirstName()
                + " " + userRepository.findByEmail(currentPrincipalName).getLastName());
       comment.setPostId(id);


        return commentRepository.save(comment);
    }

    private Post creatPost(Post post) {
        Authentication authentication = SecurityContextHolder.getContext().getAuthentication();
        String currentPrincipalName = authentication.getName(); //holding login user details


        post.setAuthor(userRepository.findByEmail(currentPrincipalName).getFirstName()
                + " " + userRepository.findByEmail(currentPrincipalName).getLastName());

        post.setDate(new Date());
        return postRepository.save(post);

    }


}

胸腺叶形式：

<div id="content" class="yellow col-xs-12">
            <form class="col-xs-12" role="form" action="/dashboard/posts"
                  th:action="@{/dashboard/posts}" th:object="${newPost}" method="post">

                <div class="form-group col-xs-12">
                    <textarea class="form col-xs-6" rows="2" id="full" placeholder="share anything....."
                              th:field="*{content}" style="font-size: 20px;" required="required"></textarea>


                    <div class="menu1 col-xs-12">
                        <hr/>
                        <ul class="text-center col-xs-12">
                            <a href="#">
                                <li>
                                    <button type="submit" class="sendpost btn btn-success">Send</button>
                                </li>
                                <li class="xs-12 "><i class="fa fa-flash fa-lg"></i>Tasks</li>
                                <li class="xs-12"><i class="fa fa-paperclip fa-lg"></i>files</li>
                                <li class="xs-12"><i class="fa fa-calendar fa-lg"></i> calendar</li>
                                <li class="xs-12"><i class="fa fa-search fa-lg"></i>stying</li>
                            </a>
                        </ul>
                    </div>
                </div>
            </form>
            <div>
                <div th:each="post : ${posts}" style="border:2px solid #CCCCCC ; margin-bottom: 50px" id="post-div"
                     class="post-group col-xs-12">
                    <div class="imag  col-xs-2">

                        <!--<input  type="hidden" th:field="*{post.id}" disabled="disabled"/>-->

                        <img style="width: 50px;" src="images/1.png" class="img-circle img-responsive" alt=""/>
                    </div>


                    <div class=" col-xs-10">
                        <h4 style="line-height: .4;"><p class="name" th:text="*{post.author}">

                        </p>
                            <small style="color: #337ab7" th:text="*{post.date}"></small>
                        </h4>
                        <br/>

                        <p style="font-size: 20px" id="post-p" class="desc" th:text="*{post.content}"></p><br/>
                        <div class="footer ignore-zoom">
                            <a class="comment" onclick="showDiv1()"><i class="aa fa fa-comment"></i>
                                <span class="lin">0</span></a>
                            <a onclick="showDiv2()" href="#">
                                <i id="like" class="aa fa fa-heart active"></i>
                                <span style="display:none;" id="like-1" class="lin">1</span></a>
                            <a class="aa dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><i
                                    class="fa fa-pencil"></i>&nbsp;</a>


                        </div>
                        <div th:each="comment : ${comments}" id="my-comment">
                            <div th:if="${post.id == comment.postId}">
                                <hr/>
                                <br/>

                                <img class="img-circle img-responsive" src="images/1.png"
                                     style="margin-right:5%; width: 50px; display: inline-flex; color:#080602;"/>
                                <div style="line-height:.8">
                                    <label th:text="*{comment.author}"> </label><br/>
                                    <small th:text="*{comment.date}" style=" color: #337ab7 ; margin-left:16%;">time of
                                        comment
                                    </small>
                                </div>
                                <br/>
                                <p style="font-size: 16px;" id="-comment" th:text="*{comment.comment}"></p>
                                <div class="footer footer1 ignore-zoom">
                                    <a onclick="showDiv4()" href="#">
                                        <i id="like1" class="aa fa fa-heart active"></i>
                                        <span style="display:none;" id="like-2" class="lin">1</span></a>
                                    <a class="aa dropdown-toggle" data-toggle="dropdown" href="#" aria-expanded="false"><i
                                            class="fa fa-pencil"></i>&nbsp;</a>

                                </div>
                            </div>

                        </div>
                        <form role="form" action="/dashboard/comments"
                              th:action="@{/dashboard/comments}" th:object="${newComment}" method="post">
                            <input type="hidden" name="postId" th:value="${post.id}"/>
                            <div id="comment-div" class="form-group  col-xs-12">
                            <textarea th:field="*{comment}" class="form col-xs-6" rows="2" id="full2"
                                      placeholder="Your Comment....." required="required"></textarea>


                                <div class="menu1 col-xs-12">
                                    <hr/>
                                    <ul class="text-center col-xs-12">
                                        <a href="#">
                                            <li onclick="showDiv()">
                                                <button type="submit" class="btn btn-info">Send</button>
                                            </li>
                                            <li class="xs-12 "><i class="fa fa-flash fa-lg"></i></li>
                                            <li class="xs-12"><i class="fa fa-paperclip fa-lg"></i></li>
                                            <li class="xs-12"><i class="fa fa-calendar fa-lg"></i></li>
                                            <li class="xs-12"><i class="fa fa-search fa-lg"></i></li>
                                        </a>
                                    </ul>
                                </div>
                            </div>
                        </form>
                    </div>


                </div>

            </div>


        </div>