Как правильно передать параметр в контроллер? (Thymeleaf + Javascript)

Question

Я новичок в Thymeleaf. Все, что я знаю, это тот факт, что «Thymeleaf не Javascript, он отображается на сервере». Я все время делаю ошибки, потому что я обычно пытаюсь использовать этот Thymeleaf немного как JavaScript.

HTML

<form th:action="@{/user/sqlCode}" method="post">
    <button id="newDatabase"></button>
</form>
<textarea id="generatedSql" readonly></textarea>

Контроллер

@PostMapping(path = { "/user/sqlCode" })
public String createSchema(@RequestParam(???) String tmp) {
    String finallyMyValue = tmp;
    // STOP  I want to have data from generatedSql in this moment (finallyMyValue)
    // ...
}

@ MISSION @
1. Нажмите кнопку (id: newDatabase)
2. Получить данные из текстовой области (идентификатор: сгенерированный Sql)
3. Отправьте значение с этими данными в контроллер
4. Будьте счастливы:)
@ MISSION @

Я много чего пробовал, но только с использованием Javascript. Сценарий всегда один и тот же, JavaScript выполняется полностью перед Thymeleaf, и, наконец, я не могу правильно прочитать эти данные ... Я попробовал этот сценарий:

1. Нажмите кнопку (id: newDatabase )
2. Получить данные из текстовой области (идентификатор: сгенерированный Sql) , используя JavaScript
3. Вставить эти данные в переменную name во входном теге с использованием JavaScript
4. Отправьте переменную name в контроллер.
5. И здесь я всегда получаю NULL или ошибку 404

Снимок экрана с моим неудачным заходом на посадку, который закончился нулем в точке останова:

Answer 1

Я думаю, вам стоит попробовать Javascript с Ajax:

<div>
    <button type="button" onclick="submitData()">Change Content</button>
</div>

function submitData() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            console.log(this.responseText);
        }
    };
    xhttp.open("post", "$URL", true);
    xhttp.send();
}