ywork2020.com

Title

POST メソッドで非同期通信する

目次 (INDEX)

post とは

ここで説明する post とは次の語句からなる jQuery の関数です。
post
読み: ポスト
意味: 投稿

目次に戻る

$.post 関数の概要

この関数は、普通、form 要素内の input 要素 submit 型などを介して送信される POST メソッドを使用して非同期通信を行うことができます。

POST 送信と GET 送信という送信メソッドがありますが、POST は GETのように URL にパラメータを含めることはありません。

POST 送信はヘッダー情報とパラメータを含めたボディ情報の両方を送信しますので大容量のデータ転送には、この関数を選択します。

目次に戻る

構文

サンプルを見る前に構文を確認しておきます。

  • url: リクエストの送信先 URL を設定します。
  • data: 送信するキーと値のペアを設定します。
  • success: リクエストが成功した場合に呼び出される関数を指定します。
  • dataType: サーバーから戻ってくるデータの種類です。特に設定する必要はありません。
  • settings: 詳細は $.ajax のページ参照してください。
$.post(url [, data] [, success] [, dataType]);
$.post([settings]);

目次に戻る

サンプルコードと実行結果

ここでは $.post 関数を使って sql-select.php というファイルにリクエストします。

この php ファイルにはデータベースに SQL を発行し、テーブルデータを表示するためのコードが書かれています。

サンプルコード: PHP file ( sql-select.php )
<?php
	error_reporting(0);
	$hostName = "サーバー名";
	$dbName = "データベース名";
	$charSet = "utf8";
	$userName = "ユーザー名";
	$passWord = "パスワード";
	$sql = "";
	$dataSourceName = "mysql:host={$hostName}; dbname={$dbName}; charset={$charSet}";
	$sql = $_POST['sql'];
	if(strlen($sql) > 0){
		try{
			$objPDO = new PDO($dataSourceName,$userName,$passWord,null);
			if ($objPDO == null){
				print '接続に失敗しました。<br>';
			}
			else{
				print "接続に成功しました。<br>";
				print("sql > ".$sql."<br>");
			}
			$stmt = $objPDO -> query($sql);
			$columns = array();
			for ($i = 0; $i < $stmt->columnCount(); $i++) {
				$meta = $stmt->getColumnMeta($i);
				$columns[] = $meta['name'];
			}
			print("<table><tr>");
			for($i=0;$i<count($columns);$i++){
				print("<th>{$columns[$i]}</th>");
			}
			while($result = $stmt -> fetch(PDO::FETCH_BOTH)){
				print("<tr>");
				for($i=0;$i<count($columns);$i++){
					print("<td>{$result[$columns[$i]]}</td>");
				}
				print("</tr>");
			}
			print("</table>");
		}
		catch(PDOException $e){
			print("接続に失敗しました。<br>");
			print("sql > ".$sql."<br>");
			die();
		}
		finally{
			$objPDO = null;
		}
	}
?>
  • 10: $sql = $_POST['sql']; (この $_POST['sql'] の部分で ボタン に書かれた クエリ を受信しています。)
  • その他の説明 (このコードは PHP のPDO オブジェクトを使ってデータベースに接続し、クエリーのレスポンスを表示するものです。PHPコード の細かな説明については、このページでは割愛させていただきます。)
サンプルコード: CSS
<style>
	#idResponse{
		padding: 0.5em;
		border: thin solid ##darkgray;
		width: 95%;
	}
</style>
サンプルコード: HTML
<head>
	<style>...</style>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
	<input type="button" value="SELECT * FROM japan;" id="idButton">
	<br>
	<div id="idResponse">ここに実行結果を表示します。</div>
	<script>...</script>
</body>
  • 06: input id="idButton" (このボタンをクリックすると ajax post 通信が開始されます。 送信されるデーターは SELECT * FROM japan; という SQL になります。)
  • 08: div id="idResponse" (送信の結果を この div コンテナーに表示します。)
サンプルコード: script
<script>
	$("#idButton").click(function(){
		$.post(
			"./sql-select.php",
			{"sql" : $("#idButton").val()},
			function(results){
				$("#idResponse").html(results);
			}
		);
	});
</script>
  • 04: "./sql-select.php" (構文の url の部分です。 リクエスト先の URL (ファイル名) です。)
  • 05: {"sql" : $("#idButton").val()} (構文の data の部分です。 "sql" というキー と ボタン要素に記してある SQL をセットで送信します。)
  • 06-08: function(results){ 関数の処理 } (構文の success の部分です。 通信成功時に実行される関数です。)
実行結果:
実行:


応答: id="idResponse"
ここに実行結果を表示します。

このページでは $.post 関数でデータベース接続ページに送信しましたが、form 要素から単純に POST 送信したものが、 SELECT文の基本的な使い方 のページになります。 リンク先にも同じようなボタンがありますので、参考になれば幸いです。

目次に戻る

$.post を使用上の注意点

$.post 関数では通信エラーが起こった時にはコールバック関数が実行されません。 エラー処理が必要な場合には $.ajax 関数を使用してください。

目次に戻る