JSON形式のPOSTデータ


86

JSON形式に変換して、JavaScript関数でPOSTする必要のあるデータがいくつかあります。

<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形式で値を送信し、JavaScriptでPOSTを実行する必要があります。


JSONデータにはどのような構造が必要ですか?ただ{"firstName":"harry", "lastName":"tester", "toEmail":"testtest@test.com"}
ガンボ

1
はい、データはあなたが説明した形式になります!回答ありがとうございます!

回答:


171

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

62
これは、100Kのフレームワークを使用せずに、20行のコードでジョブを実行する方法の優れたクリーンで簡潔な例だと思います。
spidee 2012年

1
@IanKucaありがとう:)データをurlencodeせずにjsonデータを送信できるかどうか疑問に思っていましたか?"cmd":"<img src=0 onerror=alert(1)>"%3Cimg+src%3D0+onerror%3Dalert%281%29%3E
つまり、

2
@liweijianあなたはどんなJSON.stringifyリターンでも行くべきです。
JK 2013年

2
@IanKuca投稿データはhtml formnotによってエンコードされたようJSON.stringifyです。
tli2020 2013年

@liweijianその場合は、最初にフォーム値をurldecodeする必要があります
Kevin

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
Josh、jQueryの例は別の方法を示しています。JSONよりも標準のクエリ文字列のように見えます。
サンプソン

4
あなたたちは正しいです。それに応じて答えを更新しました。ありがとう!
Josh Stodola

7
これは良い例ですが、タイトルによると、これはjavascriptライブラリではなくjavascriptを使用して実行する必要があります(この場合はjQueryのように)
Juan Carlos Alpizar Chinchilla 2014

4
もちろん、あなたはそれを難し​​い方法で行うことを歓迎します。他の誰もがjQueryを使用しています。
PaulMurrayCbr 2014年

9
質問は、jqueryライブラリではなくjavascriptを使用してデータをPOSTする方法を尋ねます。これは間違った質問に答えます。
ブレアアンダーソン


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に効果的に文字列化されません。
クエンティン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.