POST-данные в формате JSON

86

У меня есть некоторые данные, которые мне нужно преобразовать в формат JSON, а затем отправить их с помощью функции JavaScript.

<body onload="javascript:document.myform.submit()">
<form action="https://www.test.net/Services/RegistrationService.svc/InviteNewContact" method="post" name="myform">
  <input name="firstName" value="harry" />
  <input name="lastName" value="tester" />
  <input name="toEmail" value="testtest@test.com" />
</form>
</body>

Так сейчас выглядит пост. Мне нужно отправить значения в формате JSON и выполнить POST с помощью JavaScript.

— Дамьян Павлица
источник

Какую структуру должны иметь данные JSON? Просто {"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}?

— Gumbo

1

Да, данные будут в описанном вами формате! спасибо за ответы!

172

Не уверен, что вам нужен jQuery.

var form;

form.onsubmit = function (e) {
  // stop the regular form submission
  e.preventDefault();

  // collect the form data while iterating over the inputs
  var data = {};
  for (var i = 0, ii = form.length; i < ii; ++i) {
    var input = form[i];
    if (input.name) {
      data[input.name] = input.value;
    }
  }

  // construct an HTTP request
  var xhr = new XMLHttpRequest();
  xhr.open(form.method, form.action, true);
  xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');

  // send the collected data as JSON
  xhr.send(JSON.stringify(data));

  xhr.onloadend = function () {
    // done
  };
};

— JK
источник

62

Я думаю, что это хороший, чистый, лаконичный пример того, как выполнить работу в 20 строк кода без 100 КБ фреймворка.

— spidee

1

@IanKuca Спасибо :) Мне было интересно, можем ли мы отправить данные json без urlencode? Я имею в виду, что я хочу отправить данные как "cmd":"<img src=0 onerror=alert(1)>"нет%3Cimg+src%3D0+onerror%3Dalert%281%29%3E

— tli2020

2

@liweijian Ты должен пойти с любой JSON.stringifyотдачей.

— JK

2

@IanKuca Похоже, что данные поста были закодированы html formnot JSON.stringify.

— tli2020 08

@liweijian, если это так, вам нужно сначала расшифровать значения формы,

— Кевин Пено,

28

Вот пример использования jQuery ...

 <head>
   <title>Test</title>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
   <script type="text/javascript" src="http://www.json.org/json2.js"></script>
   <script type="text/javascript">
     $(function() {
       var frm = $(document.myform);
       var dat = JSON.stringify(frm.serializeArray());

       alert("I am about to POST this:\n\n" + dat);

       $.post(
         frm.attr("action"),
         dat,
         function(data) {
           alert("Response: " + data);
         }
       );
     });
   </script>
</head>

Функция jQuery serializeArray создает объект Javascript со значениями формы. Затем вы можете использовать JSON.stringify, чтобы преобразовать это в строку, если это необходимо. И вы тоже можете снять нагрузку со своего тела.

— Джош Стодола
источник

2

Джош, пример с jQuery показывает иное: больше похоже на стандартную строку запроса, чем на JSON.

— Сэмпсон,

4

Вы правы, ребята. Я обновил ответ соответственно. Благодарность!

— Джош Стодола,

7

Это хороший пример, однако, судя по названию, это должно выполняться с использованием javascript, а не библиотеки javascript (например, jQuery в данном случае)

— Хуан Карлос Альпизар Шинчилла

4

Вы, конечно, можете сделать это трудным путем. Все остальные используют jQuery.

— PaulMurrayCbr

9

Вопрос спрашивает, как отправлять данные POST с помощью javascript , а не библиотеки jquery. Это отвечает на неправильный вопрос.

— Блэр Андерсон

3

Другой пример доступен здесь:

Отправка JSON на сервер и получение взамен JSON без JQuery

Это то же самое, что и ответ jans, но также проверяет ответ серверов, устанавливая обратный вызов onreadystatechange для XMLHttpRequest.

— Эндрю Пэйт
источник

1

Используя новый объект FormData (и другие вещи ES6), вы можете сделать это, чтобы превратить всю вашу форму в JSON:

let data = {};
let formdata = new FormData(theform);
for (let tuple of formdata.entries()) data[tuple[0]] = tuple[1];

а затем, как xhr.send(JSON.stringify(data));и в исходном ответе Яна.

— Фелк
источник

Это не сработает. Объекты FormData бесполезно преобразовываются в JSON.

— Квентин