Javascript 使用Play框架以JSON形式提交表单

我试图将表单作为JSON对象提交，因为我想用play创建一个RESTAPI

我遇到的问题是，Play告诉我这不是一个有效的JSON

我的表格代码：

@(form : Form[Product]) @main("Create Form"){
@helper.form(routes.Products.createProduct, 'enctype -> "application/json"){
    @helper.inputText(form("name"))
    <button>Commit</button>
} }

---

最好的方法是什么？一本关于使用Ajax提交的书，但因为我对play还不熟悉，所以我不知道如何使用play的表单语法来实现这一点。

使用jQuery（因此请确保您的头脑中包含jQuery）和基于函数的

formAsJson（）

函数可以轻松实现

@helper.form(routes.Products.createProduct(), 'id -> "myform") {
    @helper.inputText(jsonForm("name"))
    <button>Commit</button>
}

<script>
    $.fn.formAsJson = function(){
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return JSON.stringify(o)
    };

    var $myform = $("#myform");
    $myform.on('submit', function () {
        $.ajax({
            url: $myform.attr('action'),
            type: $myform.attr('method'),
            contentType: "application/json",
            data: $myform.formAsJson(),
            success:function(){
                alert("Great! Everything's OK!");
            },
            error: function(){
                alert("Booo, something wrong :(");
            }

        });
        return false;
    });
</script>

---

谢谢你的回复，为我工作。但我认为我们的模型可以识别请求类型，因为Play框架有一个MimeType类。您知道如何在java中创建一个switch子句，告诉Play ok if MimeType.Json如果是MimeType.HTML，那么执行此操作，然后执行其他操作吗？

@helper.form(routes.Products.createProduct(), 'id -> "myform") {
    @helper.inputText(jsonForm("name"))
    <button>Commit</button>
}

<script>
    $.fn.formAsJson = function(){
        var o = {};
        var a = this.serializeArray();
        $.each(a, function () {
            if (o[this.name] !== undefined) {
                if (!o[this.name].push) {
                    o[this.name] = [o[this.name]];
                }
                o[this.name].push(this.value || '');
            } else {
                o[this.name] = this.value || '';
            }
        });
        return JSON.stringify(o)
    };

    var $myform = $("#myform");
    $myform.on('submit', function () {
        $.ajax({
            url: $myform.attr('action'),
            type: $myform.attr('method'),
            contentType: "application/json",
            data: $myform.formAsJson(),
            success:function(){
                alert("Great! Everything's OK!");
            },
            error: function(){
                alert("Booo, something wrong :(");
            }

        });
        return false;
    });
</script>

public static Result createProduct() {
    JsonNode json = request().body().asJson();
    String name = json.findPath("name").textValue();
    if (json==null || name==null || ("").equals(name.trim())){
        return badRequest();
    }

    return ok();
}