既存のコードをあまり変えずにPOSTしたい場合や、そのまま書くとformタグがネストしてしまう時にjQueryだけでPOSTできたら嬉しいかなと思い、その方法を調べてみた。
AjaxではなくformタグでPOSTしてページ遷移するのと同じ状況にしたい。
やり方としてはjQueryオブジェクトでformを作成してbodyへ追加した後、submitメソッドを実行すればそういうフォームが存在するのと同じことになる。
<script type="text/javascript">
function postForm(){
$('<form/>', {action: 'post.php', method: 'post'})
.append($('<input/>', {type: 'hidden', name: 'account', value: 'krhitoshi'}))
.append($('<input/>', {type: 'hidden', name: 'name', value: 'Hitoshi Kurokawa'}))
.appendTo(document.body)
.submit();
}
</script>
<button onclick="postForm();">jQueryによるPOST</button>
typeがhiddenであれば、画面上は何も変わらずPOSTできる。
HTMLで書くと内容的には次のようになる。
<form action="post.php" method="post"> <input type="hidden" name="account" value="krhitoshi"> <input type="hidden" name="name" value="Hitoshi Kurokawa"> <input type="submit" value="フォームによるPOST"> </form>
とりあえず、これで実現できることは分かったけど、他に方法ないものだろうか。
