猿の日記

ボケ防止に日記を書くことにしました。参考になる記事があれば幸いです。

[PR]

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

【jQuery】別タブを開いてPOSTする方法

画面内のボタン押下時に別タブを開いて、その開いたタブへPOST送信する方法を

jQueryを使って記述しました。

GETであればリンクのtarget属性に「_blank」を指定すれば簡単に実現できるのですが、

今回、「URLパラメータ見せたくない」という要望だったのでちょっと調べてみました。

さっそくコードから

<script type="text/javascript">

 $(function(){
    $('button[name="open"]').on('click', function() {
      window.open('', 'sample');
      var $postData = $('<input />', {
        type: 'hidden', 
        name: 'post_data', 
        value: '123'
      });
      var $form = $('<form />', {
        action: 'http://www.sample.com/test.php',
        target: 'sample',
        method: 'post'
      });
      $form.append($postData).submit();
    });
  });

</script>
<button name="open">open</button>

まずは、

window.open('', 'sample');

で別タブを開きます。

通常は第１引数にURLを指定するのですが、空にしておくのがポイントです！

また、この別タブに名前を付けておきます。（今回は「sample」と付けました。）

（画面サイズを指定すると別windowで開きますが、画面サイズを指定しないと

別タブで開きます。）

次に、この「sample」と付けた別タブへPOSTします。

その方法は、以下のようにformの属性を指定します。

まず、actionには別タブで開くURLを指定します。

そして重要なのが、target属性。

ここで、先ほど指定した別タブの名前「sample」を指定します。

こうすることで、submit先を別タブにすることができます。

method属性はもちろんpostです。

（今回は、form要素の作成、hidden項目の追加、formのsubmitを全てjQueryで行っています。

こうすれば無駄なformを作成する必要がないのでスマートに記述できます。）