Как отправить форму без перезагрузки страницы

Question

У меня есть действие с textarea и кнопка отправки

<form method="post" action="/analyze">
        <div class="form-group">
            <label for="text">Input text:</label>
            <textarea class="w-100" name="text" id="text" cols="30" rows="10"></textarea>
        </div>

        <div class="form-group d-flex justify-content-center">
            <input type="submit" class="btn__submit btn btn-dark my-auto" value="Обработать">
        </div>
    </form>


    <div class="row">
        <div class="col">
            <p th:text="#{nertext}"></p>
        </div>
    </div>

Когда я нажимаю кнопку отправки, я хочу получить обработанный текст с сервера в Spring Boot и вставить тег p в div col. Java Контроллер

@RequestMapping(value = "/analyze", method = RequestMethod.POST)
public String analyzeText(@RequestParam String text, Model model) {
    System.out.print(classifier.classifyToString(text, "tsv", false));
    String asd = classifier.classifyToString(text, "tsv", false);

    model.addAttribute("nertext", asd);

    return "/analyze";
}

Как я могу отправить без перезагрузки страницы

Answer 1

Используйте API Fetch (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch) и прослушиватель событий onsubmit (https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onsubmit), чтобы отправить форму с JavaScript без перезагрузки страницы:

let form = document.getElementById("the-form");
form.onsubmit = function (e) {
    e.preventDefault();
    fetch(form.action, {
        method: "post", 
        body: new FormData(form)
    }).then(response => {
        // do something with the response...
    });
}

e.preventDefault() гарантирует, что страница не будет перезагружена при нажатии кнопки отправки. Предполагается, что ваша форма имеет идентификатор the-form, например:

<form id="the-form" method="post" action="/analyze"> ... </form>