【JavaScript】ajaxやaxiosをformの送信メソッドでジャックする方法

　ajaxやaxiosの様な非同期通信ライブラリを用いることによって1ページ上で全てを完結させることができます。しかしながらそのようなことをした場合、1ページが巨大になりページ遷移なりなんなりを挟んでページ分割したくなる時があります。この記事で紹介する方法によって簡単に非同期通信を同期通信であるformの送信に差し替えられます。
　主となるjavascriptコードは次です。自分の場合、これにformの空タグを用意するのがコードがあっさりして便利な感じです。

// このajaxコードを
//  $.ajax({
//    type: "post",
//    url: "/宛先",
//    data: submitData,// 送信用オブジェクト
//  });

// 次の様に替えられます
// formElementを用意。
// createするより<form action="/宛先" method="post"></form>の空タグを用意する方が楽なのでこの形
var form = document.querySelector('form[action="/宛先"]'); 
// for in で送信データを列挙。列挙したデータをinput要素に変換してform要素中に挿入
for ( var key in submitData ) {
    var inputElement = document.createElement('input');
    inputElement.name = key;
    inputElement.value = submit[key];
    inputElement.style.display = 'none';
    form.appendChild(inputElement);
}
form.submit();// formを送信。ページも遷移されます。

　これを使うとで動的すぎるページを静的ページに分割しやすくなります。