@y_s_posted at 2022-01-04

JavaScriptのみでPOSTデータを取得する方法

Q&A

Closed

PHP HTML JavaScript HTML5

実現したいこと

JavaScriptのみでPOSTデータを受け取りクエリパラメータを付与してURLを生成、GETで送信したい。

■ブラウザ
IE (11だったかな？うろ覚え)

条件）
・POSTのデータ(パラメータ)を取得するにはPHPで行うことが基本だがPHPは使用できない。
・jQuery等のライブラリは使用できない。

送信元(sender.html)


~ 略 ~
<form name='sender' id='sender' method='POST'>
  <input type="hidden" id='send' value='data1'>
  <input type="hidden" id='send' value='data2'>
  <input type="hidden" id='send' value='data3'>
</form>

~ 略 ~

<script>
  document.getelementbyid('sender').action = "https://~hoge~/receiver.html?key=query";
  document.getelementbyid('sender').submit();
</script>

sender.htmlでPOST送信されるデータ(data1,data2,data3)をreceiver.htmlで取得してクエリパラメータとしてURLに付与。かつ、sender.htmlのURLにあるパラメータ(key=query)も保持しつつGET送信したい。

おおまかな流れ

sender.html(POSTで送信) → receiver.html(POSTで値を受け取りURL生成。GETで送信) → result.html(最終的にここにパラメータを送る)

result.htmlに送られるURL(期待動作)

https://~hoge~/result.html?key=query&param1=data1&param2=data2&param3=data3

やってみたこと

POSTをリダイレクトするとGETになるとどこかしらで書き込みがあったので自分自身にリダイレクトしたのですがパラメータがなくなってしまいました。
またXMLhttprequetを使用しサーバのresponseをみてみようとも思いましたがうまくいかず、

sender.htmlがPOSTで送信されること、result.htmlはURLパラメータからデータを受け取ることは不変なのでreceiver.htmlしか修正できません。
(sender.htmlから直接result.htmlに送ることも✖︎)

ツッコミどころ満載ですが仕様上しょうがないと思ってください。。。
実現がほぼ不可能なことも承知の上です。
どうかお力添えお願いいたします。

2Answer

@uasi posted at 2022-01-04

JavaScript だけで実現するのは不可能です。代替案として思いついたのは以下の2つです：

PHP 以外の何かしらの方法で receiver.html を動的に生成して POST パラメータを HTML に埋め込む
サーバに手を入れて、 receiver.html への POST リクエストを receiver.html?=【POST パラメータをクエリ文字列に変換したもの】 へとリダイレクトさせ、 JS でクエリ文字列を取り出す

0Like

Comments

@y_s_
Questioner
サーバに手を入れるしかないですかね…
.htaccessで301リダイレクトするとかですか？
@uasi
ただのリダイレクトだと POST パラメータが受け継がれないのでだめです。 POST パラメータを取り出してクエリ文字列に変換しつつリダイレクトする Apache モジュールを C で書ればいけるかもしれませんが……receiver.html を動的に生成することも許されない状況でそこまで手を入れられないような気もします。
@uasi
なぜこうしたいのか、なぜ PHP や他の手段で動的生成することができないのか、他にどんな制約があるのか分からないとこれ以上は何も言えません。
@y_s_
Questioner
jspで実装する許可がおりましたのでjspで実装いたします。
ありがとうございました。

@shigeokamoto posted at 2022-01-04

sender.htmlでPOST送信されるデータ(data1,data2,data3)をreceiver.htmlで取得してクエリパラメータとしてURLに付与。かつ、sender.htmlのURLにあるパラメータ(key=query)も保持しつつGET送信したい。

そもそも、このような挙動にしたいと思った理由があると思うのですが、それを説明していただけると他のプランがでてくるかもしれません。

期待される操作

https://~hoge~/result.html?key=query&param1=data1&param2=data2&param3=data3

ということだけであれば、

POST->GET

<form name='sender' id='sender' method='POST'>
                                        ↓↓
<form name='sender' id='sender' method='GET'>

でいいんじゃないかという気がしますが。