PlayFramework - 显示消息而不刷新页面

Question

实际上，我会在处理完表单后发布，例如，处理完信息并返回flash，而不用刷新新信息的页面，以防失败。如果表单是有效的，那么我会参考另一个页面。

不久前我把自己放到了网络上。我认为在不完全刷新页面的情况下刷新页面上的信息将来会很有用。

I have a video in order to illustrate what i'm saying.

如果你有代码示例，我会选择 :D

代码（可选读）：

HTML：

@module.note.render(PanelType.DANGER, "contact")
<form id="submit" class="submit-form" method="post" action="@routes.SupportController.postSupport()">

    <div class="row">
        <div class="col-md-6 col-sm-12">
            <label class="control-label">Votre nom</label>
            <input type="text" class="form-control" name="lastName" placeholder="">
        </div>
    ...
    <div class="row">
        <div class="col-md-12 col-sm-12">
            <label class="control-label">Votre message</label>
            <p>
                <textarea id="content" name="content" placeholder="Ecrivez votre message ici"></textarea>
                <script type="text/javascript">
                        CKEDITOR.replace('content');
                </script>
            </p>
        </div>
    </div> <!-- end row -->

    <hr class="invis">

    <button type="submit" class="btn btn-primary">Envoyer !</button>
</form>

postSupport() 函数：

@Http.Post
    public Result postSupport()
    {
        DynamicForm d = form.form().bindFromRequest();
        FormChecker errors = new Support().getErrors(new FormValidator(d));
        List<String> check = errors.check();
        if(check != null && !check.isEmpty())
        {
            flash("contact", check.get(0));
            return index();
        }
        Support support = new Support(d.get("lastName"), d.get("email"), d.get("content"), d.get("subject"), d.get("website"), d.get("department"));
        support.insert();
        return supportList();
    }

getErrors() 函数：

@Override
public FormChecker getErrors(FormValidator f)
{
    return new FormChecker(f,
            x -> x.validate("lastName", "content", "email", "subject", "website", "department"),
            x -> x.isValidEmail("email"),
              x -> x.isValidUrl("website"),
            x -> x.isValidMinbLenght(5, "subject")
                ? "" : "Le sujet doit avoir une longueur minimum de 5 caractères.",
            x -> x.isValidMinbLenght(30, "content")
                ? "" : "Le contenu du rapport doit faire minimum 30 caractères.",
            x -> x.isValidMinbLenght(3, "lastName")
                ? "" : "Votre nom doit avoir une longueur minimum de 5 caractères.",
            x -> new SupportDepartment().get("department", x.get("department")) != null
                ? "" : "Le département n'éxiste pas."
    );
}

非常感谢。

Answer 1

您可以使用函数来检查输入，然后如果一切正常，请发送表单。

function check(){
   if(arguments are valid) sendResults();
   else showErrors;
}

如果您显示代码的最低版本会有所帮助，例如单击按钮时会触发什么操作。