【HTTP】テキストエリアにJSONを記述し、POSTで送信したい

現在業務でサーブレットの動作確認を行うため、HTMLでJSONデータをPOSTする簡易的なテストドライバを作成しようとしてます。

テキストエリアに記述したJSON文字列部分をBodyとして送信したいです。
ネットで調べたものだと、key-value形式でformタグの情報をJSONとして送信するものがほとんどだったので、やり方をご教示いただきたく思います。
基本的なところで恐縮ですが、お力をお借りできればと思います。

dodox86

2020/01/29 23:32 編集

htmlのformで送るとjsonデータ部分はURLエンコードされてしまうと思いますが。そんなデータで良いのでしょうか。受信側サーブレットでなんとかするから、postのcontent-body部分にとにかくjsonデータを入れて送りたいということでしょうか。

sugou036

2020/01/29 23:38

ご回答ありがとうございます。おっしゃる通り、content-body部にjsonデータを入れて送るのがやりたいことです！

dodox86

2020/01/30 01:32

普通（？）にhtmlのformのtextareaにJSONデータを入れてsubmitし、受信したサーブレットでformのデータをURLデコードすればJSONデータが復元できるはずなので、それではだめなのでしょうか。

dodox86

2020/01/30 01:39

言い方を変えると、送信するデータのContent-Type: がformの場合の Content-Type: application/x-www-form-urlencoded でいいのか、それともJSONそのもの、 Content-Type: text/json や Content-Type: application/json を望んでいるのか、です。

sugou036

2020/01/30 01:52

後者です。 Content-Type: application/json を望んでいます。

行動規範の内容に同意します

回答2件

ベストアンサー

htmlのformで送るとHTTPリクエストのContent-Type:はどうしてもapplication/x-www-form-urlencodedになってしまいます。これは変えられません。それでもhtml中でやりたいのであれば、html + JavaScript + Ajax でできましたのでご紹介します。

JavaScript によるフォームの送信 - MDN web docs を参考に、以下のhtmlファイルを作成し、サーブレットが稼働していることを想定したhttpサーバー側に配置しました。Ajaxを使うので、同じサイトでなければいけません。
POST先のURLは、「http://localhost:8000/servlet」としています。

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <title>post jason sample</title>
5    <meta charset="UTF-8">
6  </head>
7  <body>
8    <form name="form1">
9      <textarea id="textarea1" cols="80", rows="10" value="data to send">
10{ "key1": "value1", "key2": "value2" }
11      </textarea> <input type="button" id="button1" value="send!" onClick="sendData();">
12    </form>
13
14    <script>
15/*
16参考:
17https://developer.mozilla.org/ja/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript
18*/
19function sendData() {
20  var XHR = new XMLHttpRequest();
21
22  // データが正常に送信された場合に行うことを定義します
23  XHR.addEventListener('load', function(event) {
24    alert('Yeah! Data sent and response loaded.');
25  });
26
27  // エラーが発生した場合に行うことを定義します
28  XHR.addEventListener('error', function(event) {
29    alert('Oups! Something goes wrong.');
30  });
31
32  // リクエストをセットアップします
33  XHR.open('POST', 'http://localhost:8000/servlet');
34
35  // フォームデータの POST リクエストを扱うために必要な HTTP ヘッダを追加します
36  XHR.setRequestHeader('Content-Type', 'application/json');
37
38  // 最後に、データを送信します
39  var data = document.getElementById("textarea1").value;
40  XHR.send(data);
41}
42    </script>
43  </body>
44</html>

このformでtextareaに入力したJSONデータ「{ "key1": "value1", "key2": "value2" }」を送信すると、以下のHTTPリクエストが送信されます。

plain
1POST /servlet HTTP/1.1
2Host: localhost:8000
3Connection: keep-alive
4Content-Length: 45
5Origin: http://localhost:8000
6User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.130 Safari/537.36
7Content-Type: application/json
8Accept: */*
9Sec-Fetch-Site: same-origin
10Sec-Fetch-Mode: cors
11Referer: http://localhost:8000/sample1.html
12Accept-Encoding: gzip, deflate, br
13Accept-Language: ja-JP,ja;q=0.9,en-US;q=0.8,en;q=0.7
14
15{ "key1": "value1", "key2": "value2" }

POSTメソッドであり、Content-Type:はapplication/json、コンテントボディ部も生のJSONデータです。macOS Catalinaで、WEBブラウザーはchromeを使いました。

html + JavaScript + Ajaxならやってやれないことは無いと言うことですが、サーバー上に配置する必要があるし煩雑でもあるので、他回答者であるtanatさんが提案されたようにpostmanのようなツールや、curlコマンド、ncコマンド等を使った方が良い気がします。REST APIを提供するようなWEBサービスでは、curlコマンドでの使用例も多く掲載されています。

投稿2020/01/30 07:59

編集2020/01/31 01:10

dodox86

総合スコア9380