在带有请求参数的thymeleaf中使用搜索功能

Question

我有一个页面，在那里我可以得到一个条目列表。现在，我希望能够从这些列表中进行搜索。

我当前检索列表的url是/show/products。我想在此页面中添加一个搜索表单，以便可以使用请求参数进行搜索。是的，我可以使用ajax，但我必须使用请求参数。

所以如果我搜索一个产品名称，那么- /show/products？############################################################################################

<form ui-jp="parsley" th:action="@{/show/products(name=${pName})}" th:object="${pName}" method="get">
    <div class="row m-b">
        <div class="col-sm-6">
            Search by Name:
            <input id="filter" type="text" th:field="*{pName}" class="form-control input-sm w-auto inline m-r"/>
            <button class="md-btn md-fab m-b-sm indigo">
                <i class="material-icons md-24">&#xe8b6;</i>
            </button>
        </div>
    </div>
</form>

这就是我在控制器中尝试的：

@GetMapping("/show/products")
public String getProduct(Model model,
                         @RequestParam(required = false) String name,
                         @ModelAttribute String pName) {

    List<Product> products = this.productService.getAllProducts(name)
    model.addAttribute("products", products);
    return "show_product";
}

我得到这个错误：

Neither BindingResult nor plain target object for bean name 'pName' available as request attribute
    at org.springframework.web.servlet.support.BindStatus.<init>(BindStatus.java:153)
    at org.springframework.web.servlet.support.RequestContext.getBindStatus(RequestContext.java:897)

Answer 1

您正试图使用变量pName（Model属性）作为表单对象。

在您的视图中，您正在向表单传递一个模型属性，如下所示th:object=“${pName}”，但是您需要传递一个表单对象。

表单对象不是一个类，而是一个简单的java对象（POJO）。您可以将表单对象视为您的表单，但在服务器端。

在视图中使用表单对象之前，需要先创建它并将其添加到模型中。

你会这样定义它

public class MyFormObject{
    private String pName;
    public String getPName(){
        return pName;
    }
    public void setPName(String pName){
        this.pName = pName;
    }
}

现在你的控制器方法会变成

@GetMapping("/show/products")
public String getProduct(Model model,
    @ModelAttribute("myFormObject") MyFormObject myFormObject,
    BindingResult result) {
    List<Product> products = this.productService.getAllProducts(myFormObject.getPName());
    model.addAttribute("products", products);
    return "show_product";
}

然后可以像这样将表单对象传递给表单

                       <form ui-jp="parsley" th:action="@{/show/products}" th:object="${myFormObject}" method="get">
                            <div class="row m-b">
                                <div class="col-sm-6">
                                    Search by Name: <input id="filter" type="text" th:field="*{pName}" class="form-control input-sm w-auto inline m-r"/>
                                    <button class="md-btn md-fab m-b-sm indigo"><i class="material-icons md-24">&#xe8b6;</i></button>
                                </div>
                            </div>
                        </form>

您需要阅读文档，所有这些都在那里详细解释。