如何在Spring thymleaf中创建动态url

Question

@GetMapping("/deposit")
public String deposit(@RequestParam("amount") double amount,@RequestParam ("id") int id) {
if (amount > 0) {
accountService.deposit(id, amount);
}
return "redirect:/account";
}

我有两个参数，我需要从我的html文件发送，我的问题是'金额'参数应该来自html文件。我如何动态地做到这一点?

<input type="number" id="amount">
<a th:href="@{/account/deposit(id=${account.id}, amount=????)}">Deposit</a>

我想把输入值转换成金额:如果有任何帮助，我将不胜感激。

Answer 1

正如@andrewJames所提到的，使用表单提交这个值要容易得多。例如:

在你的HTML

<form th:action="@{/account/deposit(id=${account.id})}" method="post">
<input type="number" id="amount" name="amount">
<button type="submit">Deposit</button>
</form>

In your Controller

@PostMapping( "/deposit" )
public String onDepositSubmit( @RequestParam Long id, @RequestParam Integer amount ) {
if (amount > 0) {
accountService.deposit(id, amount);
}
return "redirect:/account";
}

这将是最简单的解决方案。然而，可以动态地改变一个链接，因为在客户端链接已经呈现为一个正常的链接(例如/account/deposit?id=12345)，所以你可以使用JS操纵它，如你所愿，例如这样的东西(使用JQuery):

<input type="number" id="amount">
<a th:href="@{/account/deposit(id=${account.id},amount=0)}" id="amount_link">Deposit</a>
<script>
let amountInput = $( '#amount' )
let amountLink = $( '#amount_link' )
amountInput.keyup( function() {
let url = new URL( amountLink.attr( 'href' ) );
url.searchParams.set( 'amount', amountInput.val() )
amountLink.attr( 'href', url.toString() )
} )
</script>

将在输入时创建一个keyup事件监听器，并在每次输入或删除字符时更新链接。然而，这是不必要的复杂，因此被认为是一个坏的做法。