Blog スタッフブログ

JavaScript WEB制作 システム開発

[jQuery]JSON形式でのAjax通信

システム開発担当のTFです。

やり方

  • htmlでフォーム作成
  • jQuery本体と、jquery-serialize-objectを読み込む
  • jquery-serialize-objectを用いて、ajaxで送信する

参考

　　jQueryでフォームをAjax送信する際の基本パターンのチュートリアル。二重送信の防御とか。
　　フォームの内容をjsonにしたい時の、jquery拡張$.fn.serializeObject()

サンプル

<!DOCTYPE html>
<html lang="ja" xml:lang="ja" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <form id="send_form" method="POST" action="./test.php">
		<textarea rows="5" name="message"></textarea>
		<button>送信</button>
	</form>

	<!-- jQuery系統の読み込み -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.3/jquery.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js"></script>
	
    <script>
	$(function($) {
		$('#send_form').submit(function(event) {
			// HTMLでの送信をキャンセル
			event.preventDefault();
			
			// 操作対象のフォーム要素を取得
			var $form = $(this);
			
			// 送信ボタンを取得
			var $button = $form.find('button');
			
			// 送信
			$.ajax({
				url: $form.attr('action'),
				type: $form.attr('method'),
				data: $form.serializeJSON(),	// formの内容をjson形式でセットする
				contentType: "application/json",	// json形式での送信
				dataType:"json",	// サーバーからの戻りの形式
				
				// 送信前
				beforeSend: function(xhr, settings) {
					// ボタンを無効化し、二重送信を防止
					$button.attr('disabled', true);
				},
				// 応答後
				complete: function(xhr, textStatus) {
					// ボタンを有効化し、再送信を許可
					$button.attr('disabled', false);
				},
				
				// 通信成功時の処理
				success: function(result, textStatus, xhr) {
					// 送信完了の処理
					
					alert( "送信に成功しました。");
				},
				
				// 通信失敗時の処理
				error: function(xhr, textStatus, error) {
					alert( "エラーが発生しました。");
				}
			});
		});
	});

	</script>
</body>
</html>

戻る一覧へ戻る