【サンプルコード付き】AjaxForm画面遷移なしでFormをポストする

この記事は 約6 分で読めます。

ちょっとしたフォームを使いたくて設置しようと思ったんだけど、お問い合わせみたいにガッツリじゃなくてちょこっとだけ使いたいのにUIとしては画面遷移させずにポチッとボタン押せば送信完了になってサクサク使える感じのモノが欲しかったのでこれは非同期通信でAJAXにするのが正解かな？と思ったので作ってみた時のメモ。

HTMLでFormを用意する with JQuery
POSTされる側のPHPを準備する
JQuery部分の処理を書く

HTMLでFormを用意する with JQuery

まずはユーザーインターフェースから制作します。
ごく普通のHTMLでOKです。それとJQueryをCDNで読み込ませておきます。

<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>ajazFrom</title>
	<style>
		form{
			width:500px;
			margin:0 auto;
			height:auto;
		}
		input{
			display: block;
			padding:5px;
		}
	</style>
</head>
<body>
	<form action="index.php" method="post" id="AjaxForm">
		<h2>AjaxForm送信テスト</h2>
		<input type="text" name="hoge" placeholder="hoge" value="">
		<input type="text" name="moge" placeholder="moge" value="">
		<input type="text" name="hogehoge" placeholder="hogehoge" value="">
		<input type="submit" value="送信" class="submit">
	</form>
	<div id="result"></div>
	<script
  src="https://code.jquery.com/jquery-2.2.4.min.js"
  integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
  crossorigin="anonymous"></script>

</body>
</html>

こんな感じで十分です。
ポイントはFormにID AjaxFormとしたことと、Formの下に id=”result” と言う空のdiv要素を設けました。
JQuery通信が成功した際に取得してきた結果を表示する枠です。

POSTされる側のPHPを準備する

FormHTMLからPOSTされる側のPHPを用意します。
基本的に何も表示はしませんがPOSTされた結果を返す(ECHO)とそれをAJAXが取得してFORMの画面に表示すると言う仕組みです。

<?php ini_set('display_errors','no');
if($_POST){
	$data = $_POST['hoge'];
	file_put_contents('data.txt',$data);
// POSTが届いたらテキストファイルをスクリプトと同じフォルダに書き出す。
echo '成功しました';
}

上記のようにすると非同期通信が成功したら”成功しました”と言う文字列がform.htmlのid=result のdivに表示されます。

JQuery部分の処理を書く

さて、ここまで来たら後はJQueryの処理を書いて完成です。

<script>
  	$('#AjaxForm').submit(function(event) {
    // HTMLでの送信をキャンセル
    event.preventDefault();
    var $form = $(this);
    var $button = $form.find('.submit');
    $.ajax({
        url: $form.attr('action'),
        type: $form.attr('method'),
        data: $form.serialize(),
        timeout: 10000,  // 単位はミリ秒
        // 送信前
        beforeSend: function(xhr, settings) {
            // ボタンを無効化し、二重送信を防止
            $button.attr('disabled', true);
        },
        // 応答後
        complete: function(xhr, textStatus) {
            // ボタンを有効化し、再送信を許可
            $button.attr('disabled', false);
        },
        // 通信成功時の処理
        success: function(result, textStatus, xhr) {
            // 入力値を初期化
            $form[0].reset();
            $("#result").append(result);
        },
        // 通信失敗時の処理
        error: function(xhr, textStatus, error) {
            alert('NG...');
        }
    });
    // …
});
  </script>

上記をjqueryの読み込みの下に設置して完成です。
$(“#result”).append(result);の部分が非同期通信をして取得したデータがresultに入ります。

そのデータがsuccessのresultに格納されているのでappendでHTMLにデータを表示すると言う仕組みです。

$GETで非同期通信する場合

Ajaxで画面遷移なしでGETを送った後、ボタンを削除[サンプルコードあり]

先日Ajaxを使って画面遷移しないでFormデータをPOSTすると言う記事を書きました。 Formの場合は大よそあれで良いんですけど例えばGETでしかデータを作れない場合とか複数のFormになってしまってコードの量が膨大になってしまい...

その他のAjax処理

【jQuery】クリックした時に確認ダイアログを出す【サンプルコードあり】

作業していて表題のような事よくありますよね難しい処理は要らないしちょっとクリックした時に確認ダイアログ出して間違いクリックを防ぎたいなと言う時が。例えばデータの削除の時とか間違えてクリックしちゃったらDBからデータが消えてしまっ...

jQuery最高の教科書

株式会社シフトブレイン SBクリエイティブ 2013-11-26
売り上げランキング : 108956

Ajaxで画面遷移なしでGETを送った後、ボタンを削除[サンプルコードあり] – 稼げ！アフィリエイトパワーズより:

2018年6月21日 04:48

[…] 先日Ajaxを使って画面遷移しないでFormデータをPOSTすると言う記事を書きました。 Formの場合は大よそあれで良いんですけど例えばGETでしかデータを作れない場合とか複数のFormになってしまってコードの量が膨大になってしまいそうな時などはGETでデータを渡した方が使いやすいですよね […]