こんにちは。11月も半ばですが、まだまだ日中は暑い日が時々ありますね。
スノボーに行きたいので、冬場にちゃんと雪が降るか心配です。
今回は Javascript を利用してページ遷移のない POST 送信についてです。
今後は Web 系記事を以下サイトの方をメインでまとめていきたいと思っています。
このブログではその記事の紹介や補足情報などをまとめていきます。
＜該当記事＞
＜その他記事一覧＞
簡単にまとめます
以下簡単にまとめておきます。
<FORM> 要素での例は以下だけです。
HTMLによる通常のPOST送信のやり方
通常、HTML で POST 送信するには <FORM> 要素を使います。
method 属性値に “post” を指定することで action 属性値の URL へデータの送信ができます。
具体的には以下のようにやります。
<form method="post" action="./hoge/fuga.php">
<p>
<label for="item1">名前</label>
<input name="name" id="item1">
</p>
<p>
<label for="item2">年齢</label>
<input name="old" id="item2">
</p>
<p>
<label for="item3">住所</label>
<input name="address" id="item3">
</p>
<p>
<input type="submit" value=" 送 信 ">
<input type="reset" value="リセット">
</p>
</form>
上記 HTML コードを実行すると以下のように表示されます。
※ <FORM> 要素に target 属性を指定するとリンクと同様に新しいウインドウを開くことができます。
※以下サンプルでは送信されてきたデータの name 属性値 ( “key” と表示) と値をそのまま表示させています。
この例からも分かるように、データの送信にはページ遷移が伴います。
これをページ遷移なしで実現するには以下のように Javascript の XHR というものを使います。
※従来、ページ遷移させたくないけどデータ送信したいという場合には隠し要素 (display:none など) に <iframe> を作っておき、taeget をそのインラインフレームにすることで対応していました。
興味のある方や Javascript を使いたくない方は試してみて下さい。
Javascriptを使ったページ遷移しない方法
Javascript を使えばページ遷移しないでデータ送信が可能です。
それには XMLHttpRequest という技術を使います。
これはページ読み込み後にブラウザへリクエストを送ることができるものになります。
詳細は、コチラを参考にして下さい。
以下コードを見てわかる方は「なるほど～」と思って頂ければ良いです。
＜Javascript＞
// ページ読込完了後にボタンにclickイベントを登録する
window.addEventListener("load", function(){
document.getElementById("send_mixdata").addEventListener("click", function(){
// FoemDataオブジェクトに要素セレクタを渡して宣言する
var formDatas = document.getElementById("userinfo2");
var mixedDatas = new FormData(formDatas);
// appendメソッドでキーとデータの組をセットする
// append("キー(FORMで云うところのname属性値)", "データ")でデータをセットできる
// appendではデータは追加となる
mixedDatas.append("filename", "test.txt");
mixedDatas.append("filesize", "10,154B");
// XHRの宣言
var XHR = new XMLHttpRequest();
// openメソッドにPOSTを指定して送信先のURLを指定します
XHR.open("POST", "./hoge/fuga.php", true);
// sendメソッドにデータを渡して送信を実行する
XHR.send(mixedDatas);
// サーバの応答をonreadystatechangeイベントで検出して正常終了したらデータを取得する
XHR.onreadystatechange = function(){
if(XHR.readyState == 4 && XHR.status == 200){
// POST送信した結果を表示する
document.getElementById("mixdata_response").innerHTML = XHR.responseText;
}
};
} ,false);
}, false);
＜HTML＞
<form id="userinfo2">
<p>
<label for="item1">名前</label>
<input name="name" id="item1">
</p>
<p>
<label for="item2">年齢</label>
<input name="old" id="item2">
</p>
<p>
<label for="item3">住所</label>
<input name="address" id="item3">
</p>
</form>
<p>
<button type="button" id="send_mixdata">入力値と固定値を送信する</button>
</p>
<div id="mixdata_response">
<!-- 結果を出力する -->
</div>
上記を実行すると以下のようになります。
このコードでのミソは、動作の起点となるボタンを <input type=”submit” value=”送信”> や <button>送信</button> としないことです。
submit ではクリックした時点でページ遷移を伴いデータの送信が実行されてしまいます。
また、button 要素はデフォルトで submit と同じ動作をしますので type=”button” を指定しないと submit 同様にフォームが動作してしまいます。
(button の初期値は type=”submit” です)
まとめ
以上、ページ遷移しない POST 送信の方法でした。
間違いや不明な点などがあればこの記事の末尾にあるコメントなどからお願いします。
コメント
[…] ページ遷移せずにPOST送信する方法【Javascript】【非同期通信】【XHR】 […]