Spring boot 如何在spring boot应用程序中防止post方法后的页面刷新？

我用弹簧靴和百里香。我有一个表单正在处理的post方法（将数据从字段添加到数据库）

我想使用Toastr库来显示在按下提交按钮后添加数据是否成功的通知。库可以工作，但通知会立即消失，因为页面刷新发生在按下提交按钮之后

点击提交按钮后，我想停留在同一页上

单击提交按钮显示通知消息后，如何防止页面刷新？

控制器：

@PostMapping("/sketches/add")
    public String addSketch(
                            @Valid Sketch sketch,
                            BindingResult result,
                            ModelMap model,
                            RedirectAttributes redirectAttributes) {        
        if (result.hasErrors()) {
            return "admin/add-sketch";
        }
       sketchRepository.save(sketch);       
        return "redirect:/admin/sketches/add";
    }

HTML:

头衔

尚未选择任何文件
草图文本

按钮
电位计
编码器
发光二极管
添加GIF
尚未选择任何文件
document.getElementById（'button-save'）。addEventListener（'click'，函数（）{
toastr.info（“点击按钮”）；
});

<form action="#" th:action="@{/admin/sketches/add}" th:object="${sketch}" method="post" id="save-sketch">
        <div class="add-sketch">
            <div class="title">
                <div class="title-text">
                    <p>Title
                        <span th:if="${#fields.hasErrors('title')}" th:errors="*{title}" class="error"></span>
                    </p>
                    <input type="text" class="title-input" th:field="*{title}">
                </div>
                <div class="title-file">
                    <label for="file-input">
                        <img th:src="@{/images/add image.png}" alt="upload image">
                    </label>
                    <input id="file-input" type="file"/>
                </div>
                <span id="image-text">No file chosen, yet</span>
            </div>

            <!--SKETCH TEXT====================================-->
            <div class="sketch-text">
                <p>Sketch Text
                    <span th:if="${#fields.hasErrors('text')}" th:errors="*{text}" class="error"></span>
                </p>
                <textarea name="sketch-area" id="" cols="55" rows="6" th:field="*{text}"></textarea>
            </div>

            <!--DROPDOWN-->
            <div class="select">
                <select name="select-category" id="select-category" th:field="*{category}">
                    <option value="Buttons">Buttons</option>
                    <option value="Potentiometers">Potentiometers</option>
                    <option value="Encoders">Encoders</option>
                    <option value="Leds">Leds</option>
                </select>
            </div>

            <span th:if="${#fields.hasErrors('category')}" th:errors="*{category}" class="error"></span>

            <!--ADD GIF=====================================-->
            <input type="file" id="gif-file" hidden="hidden">
            <button type="button" id="gif-button">Add GIF<i class="fas fa-image"></i></button>
            <span id="gif-text">No file chosen, yet</span>

            <div class="save-sketch">
                <input type="submit" class="save-sketch-button" id="button-save" value="Save Sketch"/>
            </div>               

        </div>
    </form>


</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.js"></script>
<script>
    document.getElementById('button-save').addEventListener('click', function () {
        toastr.info('Button Clicked');

    });
</script>
</body>
</html>