Как отправить объект JSON с использованием данных формы html

Итак, у меня есть эта HTML-форма:

<html>
<head><title>test</title></head>
<body>
    <form action="myurl" method="POST" name="myForm">
        <p><label for="first_name">First Name:</label>
        <input type="text" name="first_name" id="fname"></p>

        <p><label for="last_name">Last Name:</label>
        <input type="text" name="last_name" id="lname"></p>

        <input value="Submit" type="submit" onclick="submitform()">
    </form>
</body>
</html>

Каким будет самый простой способ отправить данные этой формы в виде объекта JSON на мой сервер, когда пользователь нажимает на отправку?

UPDATE: Я дошел до этого, но он не работает:

<script type="text/javascript">
    function submitform(){
        alert("Sending Json");
        var xhr = new XMLHttpRequest();
        xhr.open(form.method, form.action, true);
        xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
        var j = {
            "first_name":"binchen",
            "last_name":"heris",
        };
        xhr.send(JSON.stringify(j));

Что я делаю неправильно?

Ответ 1

Получить полные данные формы в виде массива и json подстроить его.

var formData = JSON.stringify($("#myForm").serializeArray());

Вы можете использовать его позже в ajax. Или если вы не используете ajax; поместите его в скрытую текстовую область и перейдите на сервер. Если эти данные передаются как строка json через данные нормальной формы, вам необходимо декодировать его с помощью json_decode. Затем вы получите все данные в массиве.

$.ajax({
  type: "POST",
  url: "serverUrl",
  data: formData,
  success: function(){},
  dataType: "json",
  contentType : "application/json"
});

Ответ 2

HTML не дает возможности генерировать JSON из данных формы.

Если вы действительно хотите обработать его от клиента, вам придется прибегать к использованию JavaScript для:

собирайте данные из формы через DOM
организовать его в объекте или массиве
сгенерировать JSON с JSON.stringify
ОТПРАВИТЬ его с помощью XMLHttpRequest

Вероятно, вам лучше будет придерживаться данных application/x-www-form-urlencoded и обработки, которые на сервере вместо JSON. У вашей формы нет сложной иерархии, которая выиграла бы от структуры данных JSON.

Обновление в ответ на серьезную переписку вопроса...

У вашего JS нет обработчика readystatechange, поэтому вы ничего не делаете с ответом
Вы запускаете JS при нажатии кнопки отправки, не отменяя поведение по умолчанию. Браузер будет отправлять форму (в обычном порядке), как только функция JS будет завершена.

Ответ 3

ваш код в порядке, но никогда не выполняется, причина отправки кнопки [type = "submit"] просто замените ее на type = button

<input value="Submit" type="button" onclick="submitform()">

внутри вашего сценария; Форма не объявлена.

let form = document.forms[0];
xhr.open(form.method, form.action, true);