Thymelaf:将输入文本作为参数传递到href中

Question

我有一个input字段，其值由控制器通过response.query设置。在模板中，我还有两个链接，用于对query中输入的id执行read和delete调用。这是模板。

<div class="input-group">
        <input type="text" th:value="*{response.query}" />
        <div class="input-group-btn">
            <ul class="dropdown-menu dropdown-menu-right">
                <li><a href="#" th:href="@{/read/{id}(id=response.query)}">Read</a></li>
                <li><a href="#" th:href="@{/delete/{id}(id=response.query)">Delete</a></li>
            </ul>
        </div>
</div>

不幸的是，href参数总是作为null传递。有其他方法吗？

Answer 1

好吧，让我看看我是否理解你想要的：

例如，您在文本输入中输入"5"。现在你想href到：

http://localhost:8080/read/5

你有一个控制器，看起来像这样：

@RequestMapping(value="/read/{id}", method=RequestMethod.GET)
public String read(@PathVariable String id, Model model) {
  // your logic goes here
  return "read"; 
}

首先，我的建议是，你可以更改你的代码从：

<li><a href="#" th:href="@{/read/{id}(id=response.query)}">Read</a></li>

至：

<li><a href="#" th:href="@{/read/{id}(id=${response.query})}">Read</a></li>

Answer 2

你无法获得response.query，因为它在客户端，然后你调用它。在你的情况下，你需要javascript，它将构建你的链接的URL（否则，你需要一个表单来提交输入值）：

<div class="input-group">
    <input type="text" id="myval" th:value="*{response.query}" />
    <div class="input-group-btn">
        <ul class="dropdown-menu dropdown-menu-right">
            <li><a href="#" onclick="onReadClick();" href="#">Read</a></li>
            <li><a href="#" th:href="@{/delete/{id}(id=response.query)">Delete</a></li>
        </ul>
    </div>
</div>   
<script th:inline="javascript">
/*<![CDATA[*/
function onReadClick() {
    var id = $('#myval').value; 
    /*[+
    var myUrl = [[@{/read}]] + id; 
    +]*/
    window.location.href = myUrl;
});
/*]]>*/
</script>