Question

使用播放视图模板我知道我可以将Scala列表转换为javascript数组，例如例如.scala.html：

@(list: List[Any])

@import play.api.libs.json.Json

<script type="text/javascript">
    $(document).ready(function () {
        var jsArr = @Json.toJson(list);
        console.log(jsArr);
    });
</script>

但是如何回到另一个方向，将javascript数组转换为scala列表以传递给控制器？

我有这样的模板代码（test.scala.html）：

@(selected: List[String])

@main("Test Scripts Page") {

    <div class="page-header page-heading">
        <h1 class="pull-left">Test Scripts Page</h1>
        @helper.form(action = helper.CSRF(routes.DoSomething.create(selected))) {
        <input type="submit" class="btn btn-primary pull-right" value="Done >"> }
        <div class="clearfix"></div>
        <p class="lead text-left">Choose Buttons</p>
    </div>

    @for(index <- 0 to 3) {
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-primary"><input type="checkbox" name="options" id="option-@index" aria-pressed="false" autocomplete="off" checked>option @index</label>
    </div> <!-- buttons --> }

    <input type="text" id="buttonvalue"/>

    <script>
        $(window).unload(function() {
            var jsArray = []
            $('.btn-group checkbox:selected').each(function() {
                jsArray.push($(this).attr("id"));
            });
            selected = Json.fromJson(jsArray, String);    
            $("#buttonvalue").val(selected.text());
        });
    </script>
}

似乎没有工作...只返回一个空列表[]给我的DoSomething（List）控制器...基本上我试图让用户设置一些小部件的状态（在我的例子中是一个bootstrap button-grp，按钮的id是我数据库中静态引用数据的对象id）然后当它们命中＆＃34;时将该选择作为id列表读回我的DoSomething控制器。完成＆＃34;按钮。任何人都可以提供一些关于我在这里错过的建议或更好的方法来处理这种情况吗？

Answer 1

加载页面时，会发生这种情况：您的浏览器会向服务器请求HTML页面。您的scala代码在服务器上运行，并生成一个带有一些javascript的HTML页面。

服务器将HTML页面发送到浏览器。然后javascript代码在浏览器中运行，因此无法与服务器代码（Scala）通信。

要将数据发送回服务器，您可以进行HTTP呼叫，例如到服务器提供的REST端点。

Answer 2

确定。我有一个解决方案。

我的视图模板看起来像这样，Bootstrap button-grp用“myButtons”标记（注意：如果在btn-group div和标签类按钮之间插入任何内容，JQuery似乎不会选中检查选项），以及绑定到submitButton的ajax调用的脚本。

测试脚本页面 “＆GT; 选择按钮

 <div id="myButtons" class="btn-group" data-toggle="buttons">
    <label class="btn btn-primary active">
        <input type="checkbox" name="options" id="option1" autocomplete="off" checked> Box 1 (preselected)
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="option2" autocomplete="off"> Box 2
    </label>
    <label class="btn btn-primary">
        <input type="checkbox" name="options" id="option3" autocomplete="off"> Box 3
    </label>
</div>


<script>
    $('#submitButton').click(function(e) {
        var selected = $( "#myButtons :checked" ).map(function() {
            return this.id;
        }).get().join();
        var selections = JSON.stringify({ 'selected' : selected });
        $.ajax({
            type :  "POST",
            dataType: 'json',
            data: selections,
            contentType: "application/json; charset=utf-8",
            url  :  "@routes.Application.getSelection()",
            success: function(data) {
                console.log(data);
            }
        });
        return false;
    });
</script>

然后我的控制器通过AJAX帖子选择了选择：

public static Result getSelection() 
    {
        JsonNode json = request().body().asJson();

        if( json == null)
        {
            Logger.info("Expecting JSON!");
            return badRequest("Expecting Json data!");
        }
        else
        {
            String selection = json.findPath("selected").textValue();
            if (selection == null)
            {
                Logger.info("Missing Parameter: selected");
                return badRequest("Missing Parameter: selected");
            }
            else
            {
                Logger.info("selection = " + selection);
                String[] ids = selection.split(",");
            }
        }
        return ok(modaltest.render());
    }

在我的应用程序代码中，这些选择映射到存储在我的数据库中的模型中的对象ID，然后可以在后续请求中重复使用。

现在唯一的问题是我的getSelection（）控制器的最终返回请求（即另一个GET用于呈现带有表单的新页面）不会被调用。不知道为什么。可能与Ajax POST有关。

播放2.4+如何将javascript数组转换为Scala列表以传回控制器？

2 个答案: