播放框架：从下拉列表中选择值时更新网页

Question

我是第一次使用play框架。

我想在从下拉列表中选择一个值而不刷新网页时更新网页。

考虑以下示例：

<select>
  <option value= "Apple"> Apple </option>
  <option value = "Banana"> Banana </option>
</select>

当从下拉列表中选择一个值时，它应该被发布到服务器。然后服务器应该根据它得到的值返回一些信息。现在我们应该在不刷新页面的情况下显示与从下拉列表中选择的值相对应的内容。

我没有找到使用播放框架来实现此功能的方法。按照惯例，我们可以通过最初隐藏一个 div 来做到这一点，当从下拉列表中选择一个值时，我们可以将内容（从后端获取）添加到 div 并显示它。我不明白如何实现服务器端部分。在 play framework 中，controller 一般返回 Result 类型。如何在播放框架中的请求上返回 Json 值？

任何人都可以提出其他想法吗？？

谢谢

Answer 1

使用 jQuery 的解决方案（参见 change() 和 load()）：

<select id="select">
    <option value="Apple">Apple</option>
    <option value="Banana">Banana</option>
</select>

<div id="result"></div>

<script>
    $('#select').change(function() {
        $('#result').load('/foo/bar?fruit=' + $(this).val());
    });
</script>

编辑：要解决问题的 JSON/服务器端部分，请查看 ScalaJsonHttp（或 JavaJsonActions）。