Question

再次问好StackOverflow。我的任务是修改在Scala的Play上运行的网站！框架和Twitter Bootstrap。我遇到了改变DOM的障碍。我需要完成以下任务：

（正在谈论的页面接受用户输入并传递服务器Form，如果 valid将Data中映射的Form写入数据库。）

让用户从下拉列表中选择一个类别。此特定下拉列表与Form无关。
根据他们的选择，通过外键在数据库中查询与所选类别相关的特定类型的所有对象。
更改DOM（即显示而不重新加载页面）以显示这些对象以供用户选择。他们的选择被添加到Form。
提交Form，写入数据库等

问题：

这是一个很好的方式来解决我想要完成的事情吗？
如果是这样，有没有办法通过Scala / Play HTML模板更改DOM而无需重新加载页面？
如果不可能，那么手动编写的Javascript之类的内容是什么？

招生：

除了Play之外，我对Web开发的经验很少。
我对Javascript的经验很少。

资源我一直在关注：

谢谢！

Answer 1

对于将来可能遇到此问题的人，简短的回答是Javascript。

答案很长：

要执行任何AJAX工作，您需要在顶级控制器中使用类似以下的方法来设置Javascript路由：

def javascriptRoutes = Action { implicit request =>
  Ok(
    Routes.javascriptRouter("jsRoutes")(
      SomeOtherController.someMethod  // Returns a JsValue!
    )
  ).as("text/javascript")
}

然后在HTML模板（*.scala.html）中包含一些AJAXy Javascript：

<script type="text/javascript" src="@routes.ApplicationController.javascriptRoutes"></script>

最后在你的实际JS文件中（假设你正在使用jQuery）：

$("someSelector").click(function() {
    // Notice that this matches the method name that exists in Scala!
    // Make sure to pass `someMethod` what it needs.
    var req  = jsRoutes.controllers.SomeOtherController.someMethod(...)

    $.ajax({
        url:  req.url,
        type: req.type,

        success: function(json) {
            // DOM manipulation, etc., here.
        },

        error: function(xhr, status, errorThrown) {
            console.log( "Error: " + errorThrown );
            console.log( "Status: " + status );
            console.dir( xhr );
        }
    });  // ajax                                                                
}); // handler

使用Play改变DOM！骨架

1 个答案: