Как послать данные на сервер из формы в виде json?

Question

[bpGusar]

Есть React и есть бэк на Java, как послать на бэк данные из формы в виде json?
Неужели придется перечислять каждое поле формы и отправлять их в таком виде?

Answer 1

[Shahob I]

<form name="person">
  <input name="name" value="Иван">
  <input name="surname" value="Иванов">
</form>

var object = {};
var formData = new FormData(document.forms.person);

formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

var xhr = new XMLHttpRequest();
xhr.open("POST", '/submit', true)
xhr.setRequestHeader('Content-type', 'application/json; charset=utf-8');

// Отсылаем объект в формате JSON и с Content-Type application/json
xhr.send(json);

Comments

[Антон Спирин]

Это нативное решение. В вопросе React. Странно, что автору оно подошло.

[bpGusar]

Антон Спирин, мне подошла эта строка JSON.stringify(object)

[Антон Спирин]

bpGusar, вы бы почитали
https://reactjs.org/docs/forms.html#controlled-com...
https://reactjs.org/docs/uncontrolled-components.html
да и подумали хотя бы о таком вопросе, как валидация данных на стороне клиента.
Для отправки данных отлично подходит библиотека axios, которая избавляет от необходимости делать многие вещи, вроде вызовов JSON.stringify() и основана на Promise.

[Максим]

Антон Спирин, тостер приклеил запятые к ссылкам. А так в целом - нативное решение тоже неплохо же. Можно было и fetch использовать, конечно. Ну или axios / isomorphic-fetch / superagent-bluebird-promise .. кому что) /cc bpGusar

[Антон Спирин]

Максим, спасибо, поправил. Я на на случай, если автор не имеет представления о возможностях React написал.

[bpGusar]

Антон Спирин, axios не смог передать данные, а fetch с JSON.stringify() смог

[Антон Спирин]

bpGusar, а как вы пытались это сделать, если не секрет?
Пример POST запроса axios:

const plainObject = { key: 'value' };

axios.post('/somePath', plainObject).then(res => console.log(res));

[bpGusar]

Антон Спирин, вот именно так и слал и в ответ приходил 404, сервер не видел данные и мне не приходил норм ответ, а вот такая функция

const user = {
            login: this.state.name,
            pass: this.state.name2,
        };

        fetch('http://77.232.133.173:4567/hello2', {
            method: 'POST',
            body: JSON.stringify(user)
        }).then(res => {
            console.log(res);
            console.log(res.text());
        })

работает как не странно

[Антон Спирин]

bpGusar, значит, что-то неправильно делали. Я вам рекомендую вместо слепого перебора инструментов, научиться разбираться с причинами возникающих проблем.
Fetch не поддерживается в IE и ваше приложение на IE упадет с исключением. Имейте ввиду. Если это критично, добавьте полифилл.