Thymeleaf 动态 href 使用输入值

Question

我知道 Thymeleaf 模板是在服务器端呈现的，但是有没有一种简单的方法可以在客户端引用输入值以动态创建 href？

这是我目前拥有的：

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>TEST</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<h1>Dynamic href</h1>
    <p>name:  <input type="text" name="name" /></p>
    <p>age:   <input type="text" name="age"/></p>
    <p>color: <input type="text" name="color"/></p>
    <a th:href="@{/userInfo(name='Americord',age='32',color='green')}">Submit</a>
</body>
</html>

在我的应用程序控制器中，我有：

@GetMapping(value = "/userInfo")
public String userInfo(@RequestParam(value = "name") String name,
                        @RequestParam(value = "age") String age,
                        @RequestParam(value = "color") String color) {

    // get user related user information
    return "success";
}

如您所见，现在姓名、年龄和颜色的值只是硬编码的。但我想引用输入字段中的值。

也许是这样的（？）：

<a th:href="@{/userInfo(name={name.value},age={age.value},color={color.value})}">
Submit
</a>

Answer 1

不，唯一的方法是使用 JS 或 jQuery。 Thymeleaf 一旦呈现，它就不能修改任何其他内容。无论如何，使用 jQuery 非常简单，您应该立即让它工作。像下面的代码这样的东西就可以了。

var ageInput = $('#age');
var nameInput = $('#name');
var url = $('#dynamic-url');

ageInput.on('change', function() {

  if($(this).val() !== "" && nameInput.val() !== "") {
    url.attr('href', '/userinfo(age=' + $(this).val() + ', name=' + name.val() + ')');
  } else if ($(this).val() !== "") {
    url.attr('href', '/userinfo(age=' + $(this).val() + ')');
  } else if (nameInput.val() !== "") {
    url.attr('href', '/userinfo(name=' + nameInput.val() + ')');
  }
  
});

nameInput.on('change', function() {
  if($(this).val() !== "" && ageInput.val() !== "") {
    url.attr('href', '/userinfo(age=' + ageInput.val() + ', name=' + $(this).val() + ')');
  } else if ($(this).val() !== "") {
    url.attr('href', '/userinfo(name=' + $(this).val() + ')');
  } else if (ageInput.val() !== "") {
    url.attr('href', '/userinfo(age=' + ageInput.val() + ')');
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="age" type="text" placeholder="age"/>
<input id="name" type="text" placeholder="name"/>
<a id="dynamic-url" href="/userinfo">
Submit
</a>

希望对您有所帮助！

Thymeleaf 动态 href 使用输入值

Thymeleaf dynamic href using input value(s)

input

dynamic

spring-mvc

href

thymeleaf