新規タブでフォーム送信

Question

お世話になります！

以下の内容で困っており、質問させていただきました！

###前提・実現したいこと
ボタンをクリックしたら、フォームデータを自前で生成し、生成したデータでPOSTを行う。
POSTされたデータ元にPHP側でviewを生成して、新規タブに返す。

###発生している問題
フォームの送信までは出来ているのですが、新規タブ(taget blank)で表示させてPHPで生成したviewを表示させることができないです。

###ソースコード

var Form = new FormData();
Form.append("hoge","hogehoge");

var Req = new XMLHttpRequest();
Req.open("POST", "http://" + location.hostname + "/hoge.php");
Req.send(Form);

通信周りはまだまだわかっていないことだらけで、このコードが正しいのかもあやふやな状態です。。

情報に過不足がありましたら、ご指摘いただければと思います。

どうぞよろしくお願いいたしますm(_ _)m

Answer 1

以下のようにフォームタグを作るのが簡単かもしれません。

<form target="_blank"> </form>

JS で動的に作り、値を入れて HTMLFormElement のsubmit()メソッドを呼び出せば、別タブで送信されます。

別解としては、XMLHttpRequest オブジェクトの load ハンドラーで、受け取った HTML を別タブに送り込む方法もあります。新しいタブを開くopen()関数はそのタブの Window オブジェクトを返すので、親画面から別タブを操作可能です。

なお、殆どのブラウザはポップアップブロックのために、非同期通信終了後に別タブを開くことができません。
クリックなどのユーザー操作がトリガーになっていれば開けるので、通信を開始する時に先に開いておき、通信が終わったら予め開いておいたタブに転送するとうまくいきます。

以下いろいろ省略していますが流れというかイメージというか。

// 開いたタブの Window オブジェクトを保持する変数
var tab;

// クリック時に実行されるので、中で open() が使える。
// ちなみにこの名前のグローバル変数を作るとwindow.onclickとみなされて
// どこをクリックしても発動します(笑)
var onclick = function() { 
  tab = open();
  Req.addEventListener("load", callback);
  Req.send(form);
}

// この関数はトリガーが load なので、タブを開けない。
var callback = function() {
  tab.document.open();
  tab.document.write(受け取ったHTML);
  tab.document.close();
};