Thymeleaf динамический href с использованием входных значений - PullRequest
Новая
       51

Thymeleaf динамический href с использованием входных значений

0 голосов
/ 28 декабря 2018

Я понимаю, что шаблоны 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>

1 Ответ

0 голосов
/ 30 декабря 2018

Нет, единственный способ сделать это - использовать 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>

Надеюсь, это поможет!

...