表单提交后如何添加成功通知

Posted 2023-02-26

【中文标题】表单提交后如何添加成功通知

【英文标题】：How to add success notification after form submit

【发布时间】：2019-05-10 01:30:08

【问题描述】：

我想在用户提交表单后添加成功通知。

我已经查看了 Pnotify js 库 -https://sciactive.com/pnotify/，它看起来不错。但不知道如何在我的 CRUD 项目中使用。我正在使用 Spring Boot 和 Thymeleaf 作为前端。

我检查了文档：

<button class="btn btn-default source" onclick="new PNotify(
                              title: 'Regular Success',
                              text: 'That thing that you were trying to do worked!',
                              type: 'success',
                              styling: 'bootstrap3'
                          );">Success</button>

这是我的表格：

<form action="#" th:action="@/contractors-save"
    th:object="$contractor"
    method="post" class="form-horizontal form-label-left">

<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Name</label>
    <div class="col-md-5 col-sm-5 col-xs-12">
        <input type="text" th:field="*name" class="form-control"
                placeholder="name"/>
    </div>
</div>

<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Description</label>
    <div class="col-md-5 col-sm-5 col-xs-12">
        <input type="text" th:field="*description"
                class="form-control"
                placeholder="description"/>
    </div>
</div>

<div class="modal-footer">
    <button type="button" class="btn btn-default"
            data-dismiss="modal">
        Close
    </button>
    <input type="submit" value="Save" class="btn btn-success">
</div>

通知在点击操作时显示，在我的情况下，我需要在表单提交后显示。 你能建议和分享你的专业知识吗？也许还有其他选择。

【参考方案1】：

按照@Minar Mahmud 的建议，我遵循 PRG 模式，将与我的实现分享：

控制器：

@RequestMapping(value = "/contractor-save", method = RequestMethod.POST)
public String saveContractor(@ModelAttribute(value = "contractor") Contractor contractor,
                         RedirectAttributes redirectAttributes) 
    Contractor savedContractor = contractorService.save(contractor);
    redirectAttributes.addFlashAttribute("notification",
        String.format("Contractor \"%s\" successfully saved", savedContractor.getName()));
    redirectAttributes.addFlashAttribute("action", "save");

return "redirect:/contractors";

在 html 文件中，使用 javascript 在页面加载时显示通知：

<script th:inline="javascript">
$(document).ready(function () 
    var notification = /*[[$notification]]*/ "";
    var action = /*[[$action]]*/ "";
    if (action === 'save') 
        new PNotify(
            title: 'Save contractor',
            text: notification,
            type: 'success',
            styling: 'bootstrap3',
            delay: 3000
        );
     else if (action === 'remove') 
        new PNotify(
            title: 'Remove contractor',
            text: notification,
            type: 'success',
            styling: 'bootstrap3',
            delay: 3000
        );
     else if (action === 'update') 
        new PNotify(
            title: 'Edit contractor',
            text: notification,
            type: 'success',
            styling: 'bootstrap3',
            delay: 3000
        );
    
);

请随意填写评论。我想知道生产可以吗？只是为了确保我没有重新发明***。

【讨论】：

@eabushev。我不熟悉 Pnotify 库。但这种方法对我来说似乎没问题。 +1

【参考方案2】：

这是另一种选择。

您可以按照PRG模式，使用RedirectAttributes添加flash属性。

例如：

@RequestMapping(value = "/contractor", method = RequestMethod.POST)
public String handle(@Valid @ModelAttribute Contractor contractor,
                     BindingResult result,
                     RedirectAttributes redirectAttributes) 

    // Save contactor ...

    redirectAttributes.addFlashAttribute("message", "Successful!");

    return "redirect:/someGetUrl";

只需在/someGetUrl 处理程序呈现的视图中显示此message。

【讨论】：

感谢回复，也有这个想法！稍后，将发布我的实现。