問題が起きた環境
HTML
<a href="#" id="hoge">POSTするリンク</a>
<form action="wafoo" method="post" id="fuga">
<input type="hidden" name="foo" value="bar" />
</form>
JavaScript
$("#hoge").click(function(){
$("#fuga").submit();
});
期待する動作
ハイパーリンクのクリックでhiddenフィールドがPOSTされる
発生している問題
httpで表示させた状態
POSTされる(POSTリクエストが発生する)
httpsで表示させた場合
POSTされず、httpに切り替わる(GETリクエストが発生する)
原因
httpsで表示した際、ブラウザが自動的にハイパーリンクのURLを書き換え、そのURLに対するGETリクエストが実行されてしまう為。
href=”#” → href=”http://ドメイン/#”
対処方法
ハイパーリンクの動作を無効にする
方法1
JavaScriptの処理の最後にreturn false;を追加
方法2
hrefの”#”を”javascript:void(0);”に変更