浜松のWEBシステム開発・スマートフォンアプリ開発・RTK-GNSS関連の開発はお任せください
株式会社シーポイントラボ
TEL:053-543-9889
営業時間:9:00~18:00(月〜金)
住所:静岡県浜松市中区富塚町1933-1 佐鳴湖パークタウンサウス2F

【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を送信。ページも遷移されます。

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

  • この記事いいね! (0)