Как отправить объект JSON с помощью данных html-формы [закрыто]

Question

Как отправить объект 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 на мой сервер, когда пользователь нажимает кнопку Отправить?

обновление:
Я зашел так далеко, но это, кажется, не работает:

<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));

что я делаю не так?

937 2

jQuery javascript html json forms

2 ответов:

Comments

Ничего не найдено.

SachinGutte · Accepted Answer · 2014-11-24 02:57:41

получить полные данные формы в виде массива и JSON stringify его.
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"
});

Quentin · Accepted Answer · 2014-03-05 12:42:46

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

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

соберите свои данные из формы через DOM

упорядочить его в объект или массив

генерировать JSON с JSON.преобразовать в строки

после его XMLHttpRequest

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

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

ваш JS не имеет readystatechange обработчик, так что вы ничего не делаете с ответом

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