SpringBoot/HelloSpringMVC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Interactivity

Browse Source
This commit is contained in:
djmil 2023-07-26 10:55:39 +02:00
parent 4ffe7b8673
commit 959364fa12
2 changed files with 41 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
README.md
View File

@ -65,4 +65,30 @@ Thymeleaf parses the `greeting.html` template and evaluates the `th:text` exp
<p th:text="'Hello, ' + ${name} + '!'" /> <p th:text="'Hello, ' + ${name} + '!'" />
</body> </body>
</html> </html>
```
# Interactivity
Let's add minimal interactivity to the page by introducing an input field and a button. On the button press, a simple JavaScript will reload the page (by calling [[README#Web Controller]] 's `Get` endpoint) providing a value from the input filed as a URL parameter.
```html
...
<body>
<p th:text="'Hello, ' + ${name} + '!'" />
<input value="user"/>
<button>Get your greeting</button>
</body>
</html>
<script>
function getName() {
const name = document.querySelector('input').value;
console.log(name);
window.open('http://localhost:8080/greeting?name='+name)
}
const button = document.querySelector('button');
button.addEventListener("click", getName);
</script>
``` ```

16
src/main/resources/templates/greeting.html
View File

@ -6,5 +6,19 @@
</head> </head>
<body> <body>
<p th:text="'Hello, ' + ${name} + '!'" /> <p th:text="'Hello, ' + ${name} + '!'" />
<input value="user"/>
<button>Get your greeting</button>
</body> </body>
</html> </html>
<script>
function getName() {
const name = document.querySelector('input').value;
console.log(name);
window.open('http://localhost:8080/greeting?name='+name)
}
const button = document.querySelector('button');
button.addEventListener("click", getName);
</script>