播放框架 - 提交表单并显示结果（字符串列表） [英] play framework - submission of a form and displaying the result (list of strings)

问题描述

我有以下用户界面：

 < form class =form-horizo​​ntalrole =form> 
< div class =form-group> 
< label class =col-sm-1 control-label> < b>< font size =4>品牌：< / font>< / b> 
< / label> 
< div class =col-sm-4> 
< select class =form-control> 
< option value =one>  - < / option> 
< option value =two> BrandOne< / option> 
< option value =three> BrandTwo< / option> 
< option value =four> BrandThree< / option> 
< / select> 
< / div> 
< / div> 
 
< div class =form-group> 
< label class =col-sm-1 control-label> < b>< font size =4>价格：< / font>< / b> 
< / label> 
< div class =col-sm-4> 
< select class =form-control> 
< option value =one>  - < / option> 
< option value =two> 1000  -  10000< / option> 
< option value =three> 10000  -  50000< / option> 
< option value =four> 50000  -  100000< / option> 
< / select> 
< / div> 
< / div> 
 
< div class =form-group> 
< label class =col-sm-1 control-label> < b>< font size =4>英里：< / font>< / b> 
< / label> 
< div class =col-sm-4> 
< select class =form-control> 
< option value =one>  - < / option> 
< option value =two> 0  -  1000< / option> 
< option value =three> 1000  -  20000< / option> 
< option value =four> 20000  -  100000< / option> 
< / select> 
< / div> 
< / div> 
< / form> 
< button type =buttonid =searchBtnclass =btn btn-default>搜寻< / button> 
  

我想要做以下事情：按下搜索按钮后，选择三种形式的值（品牌，价格，里程）应提交。经过一些处理后，我想返回一个字符串列表，遍历列表并在结果列表中显示值（见下文）。

我有两个问题：
1.我如何提交三个选择的值？
2.如何返回List，遍历它并将字符串存储到结果列表中？

  < div class =well> 
< ul class =list-groupid =resultList> 
 <！ - 结果应该在这里 - > 
< / ul> 
< / div> 
  

感谢您的帮助！

解决方案

收到的所有POST参数都可以通过控制器以这种方式获得：

  Map<字符串，字符串[] GT; params = request（）。body（）。asFormUrlEncoded（）; 
  

要调试您实际收到的内容，请使用以下操作：

  public static Result outputPostParams（）{
 Map< String，String []> params = request（）。body（）。asFormUrlEncoded（）; 
 StringBuilder sb = new StringBuilder（）; 
 for（String s：params.keySet（））{
 sb.append（s）.append（\\\
）; 
 for（String subs：params.get（s））{
 sb.append（ - ）.append（subs）.append（\\\
）; 
} 
} 
 return ok（sb.toString（））; 
 
 $ / code> 

为了使它工作，不要忘记在<
$ b

  POST / brands controllers.Application.outputPostParams（）
  c $ c> 

并添加路线以形成动作：



 < form method =POSTaction =@ routes.Application.outputPostParams（）class =form-horizo​​ntalrole =form> 
  




I have the following UI:

<form class="form-horizontal" role="form">
            <div class="form-group">
                <label class="col-sm-1 control-label"> <b><font size="4">Brand:</font></b>
                </label>
                <div class="col-sm-4">
                    <select class="form-control">
                        <option value="one">-</option>
                        <option value="two">BrandOne</option>
                        <option value="three">BrandTwo</option>
                        <option value="four">BrandThree</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label"> <b><font size="4">Price:</font></b>
                </label>
                <div class="col-sm-4">
                    <select class="form-control">
                        <option value="one">-</option>
                        <option value="two">1000 - 10000</option>
                        <option value="three">10000 - 50000</option>
                        <option value="four">50000 - 100000</option>
                    </select>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-1 control-label"> <b><font size="4">Miles:</font></b>
                </label>
                <div class="col-sm-4">
                    <select class="form-control">
                        <option value="one">-</option>
                        <option value="two">0 - 1000</option>
                        <option value="three">1000 - 20000</option>
                        <option value="four">20000 - 100000</option>
                    </select>
                </div>
            </div>
        </form>
        <button type="button" id="searchBtn" class="btn btn-default">Search</button>

I want to do the following: After pressing the search-button, the choosen values of the three forms (Brand, Price, Miles) should be submitted. After some processing I want to return a List of Strings, iterating through the list and display the values in the result-list (see below).

I have two questions: 1. How can I submit the three choosen values? 2. How can I return the List, iterate through it and store the strings in the result-list?

<div class="well">
 <ul class="list-group" id="resultList">
  <!-- result should be here -->
 </ul>
</div>

Thanks for any help!

解决方案

All you POST params received can be obtained in the controller in this way:

Map<String,String[]> params = request().body().asFormUrlEncoded();

To debug what you actually receive I use such action:

public static Result outputPostParams(){
    Map<String,String[]> params = request().body().asFormUrlEncoded();
    StringBuilder sb = new StringBuilder();
    for(String s: params.keySet()){
        sb.append(s).append("\n");
        for(String subs:params.get(s)){
            sb.append("- ").append(subs).append("\n");
        }
    }
    return ok(sb.toString());
}

In order to make it work don't forget to define a route in routes file:

POST /brands controllers.Application.outputPostParams()

And to add the route to form action:

<form method="POST" action="@routes.Application.outputPostParams()" class="form-horizontal" role="form">

这篇关于播放框架 - 提交表单并显示结果（字符串列表）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！