web-dev-qa-db-ja.com

POST JSON形式のデータ

JSON形式に変換し、POSTそれを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="[email protected]" />
</form>
</body>

これが投稿の外観です。 JSON形式で値を送信し、JavaScriptでPOSTを実行する必要があります。

javascriptjsonpostxmlhttprequest
83
Randy Smith

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
  };
};
154
J. K.

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 を使用して、文字列に変換できます。また、身体の負荷を取り除くこともできます。

30
Josh Stodola

別の例はこちらから入手できます。

JSONをサーバーに送信し、JQueryを使用せずにJSONを取得する

これはjansの回答と同じですが、XMLHttpRequestでonreadystatechangeコールバックを設定することでサーバーの応答もチェックします。

3
andrew pate

新しい 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));がJanの元の答えのように。

0
Felk