Дані 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"}?

— Гамбо

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 рядків коду, без 100K фреймворку.

— 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 formне JSON.stringify.

— tli2020

@liweijian вам потрібно було б спочатку urldecode кодувати значення форми, якщо це так

— Кевін Пено,

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

Питання задає питання, як ПУСТИТИ дані за допомогою 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));як у оригінальній відповіді Яна.

— Felk
джерело

Це не спрацює. Об'єкти FormData не корисно обробляти строки до JSON.

— Квентін