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中从服务器获取经过处理的文本，并粘贴到div col中的标签p中。 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

使用Fetch API（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()确保单击提交按钮时不会重新加载页面。假设您的表单具有ID the-form，如下所示：

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

如何在不重新加载页面的情况下提交表单

1 个答案: