Question

我对html和那些东西都是全新的。

我尝试创建一个网页（使用Java / Spring Boot），用户在其中查看“Pizza”，选择金额和大小并提交订单。

html文档的具体部分：

#box{
  border:1px solid #ccc;
    width:400px;
    height:400px;
    background: #123d57;
    background: -moz-linear-gradient(top,  #123d57 33%, #123d57 34%, #000000 50%);
    background: -webkit-linear-gradient(top,  #123d57 33%,#123d57 34%,#000000 50%);
    background: linear-gradient(to bottom,  #123d57 33%,#123d57 34%,#000000 50%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#123d57', endColorstr='#000000',GradientType=0 );

}

因此，当用户按下按钮时，将调用以下方法：

<div class="input-group">
    <span class="input-group-addon">Bestellmenge:</span>
    <input type="number" name="amount" class="form-control" placeholder="1"/>
</div>
<form>
    <input type="radio" name="pizzaSize" value="1"> Klein</input>
    <input type="radio" name="pizzaSize" value="2"> Mittel</input>
    <input type="radio" name="pizzaSize" value="3"> Gross</input>
</form>
<div>
    <form th:action="@{/saveOrderAndReload(name=${pizza.name}, amount=${amount}, size=${pizzaSize})}" method="post">
        <div class="form-group">
            <div class="form-group">
                <input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
            </div>
        </div>
    </form>
</div>

根据我的理解，该方法需要String，int，int作为参数。网页提供String（比萨饼名称），int（来自输入字段）和来自无线电输入的int（是吗？）

但是，在尝试执行时，会调用此方法：

    @RequestMapping("saveOrderAndReload")
    public String saveOrderAndReload(@RequestParam String name, @RequestParam int size, @RequestParam int amount, Model model) {
    //Do whateher
    return "another html page";
    }

缺少2个参数，我遇到以下错误：

http://localhost:8080/saveOrderAndReload?name=SalamiPizza&amount=&size=

Answer 1

您请求中的所有参数都是字符串。你应该手动使它们成为整数。我不熟悉java，但我认为它应该像

public String saveOrderAndReload(@RequestParam String name, @RequestParam String sizeString, @RequestParam String amountString, Model model) {
    int size = Integer.parseInt(sizeString);
    int amount = Integer.parseInt(amountString);

如果字符串为空，还需要检查一部分代码 - 为int值设置0.

Answer 2

您对Thymeleaf的理解以及网络的运作方式存在缺陷。

首先，所有元素都需要在同一个<form>内提交（除非你乱用JavaScript但这是一个不同的野兽）。从HTML（也不是Thymeleaf），您将调用一个方法，您将数据提交到URL（最终在您的情况下将执行控制器）。

现在有了这些知识，首先要修复你的表格。

<div>
    <form th:action="@{/saveOrderAndReload(name=${pizza.name}, amount=${amount}, size=${pizzaSize})}" method="post">
        <div class="input-group">
            <span class="input-group-addon">Bestellmenge:</span>
            <input type="number" name="amount" class="form-control" placeholder="1"/>
        </div>
        <div class="input-group>
            <input type="radio" name="pizzaSize" value="1"> Klein</input>
            <input type="radio" name="pizzaSize" value="2"> Mittel</input>
            <input type="radio" name="pizzaSize" value="3"> Gross</input>
        </div>
        <div class="form-group">
            <div class="form-group">
                <input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
            </div>
        </div>
    </form>
</div>

接下来，您的th:action不需要包含任何值（除非您仍想传递名称）。因此，将其更改为th:action="@{/saveOrderAndReload(name=${pizza.name})所有其他属性都将包含在表单中。

您已将单选按钮pizzaSize命名为大小，无论是将控制器中的参数名称更改为pizzaSize，还是将单选按钮的名称更改为size将工作。

假设您更改单选按钮名称，表单应如下所示。

<div>
    <form th:action="@{/saveOrderAndReload(name=${pizza.name})}" method="post">
        <div class="input-group">
            <span class="input-group-addon">Bestellmenge:</span>
            <input type="number" name="amount" class="form-control" placeholder="1"/>
        </div>
        <div class="input-group>
            <input type="radio" name="size" value="1"> Klein</input>
            <input type="radio" name="size" value="2"> Mittel</input>
            <input type="radio" name="size" value="3"> Gross</input>
        </div>
        <div class="form-group">
            <div class="form-group">
                <input type="submit" class="btn btn-primary btn-success" value="zur Bestellung hinzufuegen"/>
            </div>
        </div>
    </form>
</div>

Java / html输入类型radio - 参数不匹配

2 个答案: