Как отправить JSON из HTML-формы

Question

Я пытаюсь отправить форму, представленную в формате JSON, из моего HTML-кода:

<form action="/login/verify" enctype="application/json" method="post">
    <input type="text" id="login" name="login"><br>
    <input type="password" id="password" name="password"><br>
    <input type="submit">
</form>

Мой пример кода Kotlin:

@PostMapping("/login/verify")
fun log(@RequestBody user: User, model: Model) {
    model["title"] = "login Verify"
    model["login"] = user.login
}


data class User(val login: String, val password: String)

Я знаю, enctype="application/json" не работаетно что я могу использовать, мне нужно использовать javascript?

РЕДАКТИРОВАТЬ:

Я написал это js:

 function sendJSON(formName) {
var myForm  = document.getElementById(formName);
var data = {};
    for(var formElement of myForm.childNodes.values()){
    if(formElement.name!= "undefined")
    {
        var key = formElement.name
        var value = formElement.value

        data[key] = value
    }
}

var xhr = new XMLHttpRequest();
xhr.open("POST", myForm.action, true);
xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
xhr.send(JSON.stringify(data));
}

и я изменил тип ввода сотправить на кнопку, и я добавляю туда по клику, но он не работает

Answer 1

Я думаю, что браузер не поддерживает тип JSON. Похоже, только поддержка application/x-www-form-urlencoded, multipart/form-data, text/plain (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form#attr-enctype)

Так что я рекомендую использовать javascript. Я нашел хорошую библиотеку для этого случая. https://github.com/keithhackbarth/submitAsJSON

Answer 2

Мой сценарий хорош, но этот запрос получает ответ 404 и не переходит на следующую страницу, его можно проверить с помощью xhr.responsetext

Answer 3

Проблема в том, что вам нужно включить некоторый клиентский JavaScript для отправки данных POST в форму в виде объекта JSON.

Вы можете сделать это, создав JavaScript function, который называется onclick кнопки отправки, который выполняет следующее:

1. Доступ к данным формы через DOM
2. Доступ к парам ключ-значение данных формы
3. Преобразование объекта в JSON
4. Отправка POST, например, с использованием XMLHttpRequest