2

我正在使用 The play framework 2.1.3 并且有一个关于使用 jquery 和 ajax 进行表单验证的问题。我已按照这篇文章 ( http://franzgranlund.wordpress.com/2012/03/29/play-framework-2-0-javascriptrouter-in-java/ ) 中的建议设置 JavaScript 路由并且该部分正在工作伟大的！我需要第二部分的帮助，返回一个包含错误消息的渲染表单并将其显示在我的页面上。我创建了以下示例来说明我的问题。

路由文件如下所示：

# AJAX calls
POST    /validateForm               controllers.Application.validateForm()

# JavaScript Routing
GET     /assets/javascripts/routes  controllers.Application.javascriptRoutes()

应用程序控制器如下所示：

private static Form<User> form = Form.form(User.class);

public static Result validateForm() {       
    Form<User> boundForm = form.bindFromRequest();
            
    if (boundForm.hasErrors()) {            
        return badRequest(user_form.render(boundForm));
    } else {            
        return ok();
    }
}

public static Result javascriptRoutes() {       
    response().setContentType("text/javascript");
        return ok(Routes.javascriptRouter("jsRoutes", controllers.routes.javascript.Application.validateForm()
    ));
}

在没有太技术性的情况下，我使用 Twitter Bootstrap 来呈现我的表单，因此我创建了以下视图元素（有关更多信息表单验证和表单助手，请参阅这篇文章），它由 validateForm 操作呈现并将其返回给调用 jquery。阿贾克斯（）。

@(userForm: Form[User])

@import helper._
@implicitFieldConstructor = @{ FieldConstructor(twitterBootstrapInput.f) }

@form(routes.Application.createUser(), 'id -> "createUserForm") {
    <fieldset>
    <legend>New User</legend>
        @inputText(userForm("name"), 'class -> "form-control", 'placeholder -> "First Name")
        @inputText(userForm("surname"), 'class -> "form-control", 'placeholder -> "Last Name")
        <button id="createUserBtn" type="button" class="btn">Create User</button>
    </fieldset>                         
}

我正在使用 jquery，我的 javascript 文件如下所示。就本问题而言，假设验证失败并返回 badRequest。

$("#createUserBtn").click(function() {
    jsRoutes.controllers.Application.validateForm().ajax({
        type: "POST",
        data: $("#createUserForm").serialize(),
        success: function(response) {
            // something here
        },
        error: function(response) {
            $("#createUserForm").html(response);
        }
    });
});

无需过多介绍视图，我在视图中正确地包含了 JavaScript 文件，并且有一个名为 #createUserForm 的元素。

客户端和服务器端之间的通信似乎工作得很好，但是，我无法通过 .html(response) 将响应中包含的渲染视图元素加载到页面上。那么，如何做到这一点呢？我哪里出错了？我对这些概念中的许多概念都很陌生，并希望能提供任何有用的意见。谢谢。

更新：

两项更改将允许此代码完美地工作。(1) 由于我们要替换整个表单，包括按钮，我们需要利用jQuerys .on() 来处理按钮点击事件。(2) 调用 responseText 属性将正确返回结果中包含的 html。

$(document).on("click", "#createUserBtn", function() {
    jsRoutes.controllers.Application.validateForm().ajax({
        type: "POST",
        data: $("#createUserForm").serialize(),
         success: function(response) {
            // something here
        },
        error: function(response) {
            $("#createUserForm").html(response.responseText);
        }
    });
});

任何意见？你会如何做得更好？

4

0 回答 0