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使用输入值

1 个答案: