トッカンソフトウェア

jQuery Ajax + PHP

今回はAjaxをやります。サーバ側処理はPHPで書きます。

Content-Typeにapplication/jsonを指定のJavaScript
Content-Typeにapplication/jsonを指定のPHP
Content-Type未指定のJavaScript
Content-Type未指定のPHP

Content-Typeにapplication/jsonを指定

Content-Typeにapplication/jsonを指定する方式とContent-Typeを省略する方式で$.ajaxを使ってみます。

クライアント側の処理

HTMLとJavaScript

test.html 
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery Test</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {

				$("#btn").click(function() {

					var param = {
						str1 : $("#txt1").val(),
						str2 : $("#txt2").val()
					};
					$.ajax({
						contentType : "Content-Type: application/json; charset=UTF-8",
						url : "./ajax.php",
						type : "POST",
						data : JSON.stringify(param)
					}).done(function(data, status, xhr) {
						// 正常
						show(data);
					}).fail(function(xhr, status, error) {
						// 異常
						$("#msg").append(xhr);
						$("#msg").append(":" + status);
						$("#msg").append(":" + error);
					}).always(function(data, status, xhr) {
						// 常に
					});
				});
			});

			function show(data) {
				var obj = JSON.parse(data);

				//ここに結果
				$("#msg").html(obj.str);

				//ここにリスト
				if (obj.ret == "true") {
					var str1 = "<table border='1'>";
					$.each(obj.ary, function(i, val) {
						str1 += "<tr><td>" + i + "</td><td>" + val + "</td></tr>";

						console.log(i + ': ' + val);
					});
					str1 += "</table>";
					$("#ret1").html(str1);
				} else {
					$("#ret1").empty();
				}

				//ここにマップ
				if (obj.ret == "true") {
					var str2 = "<table border='1'>";
					$.each(obj.map, function(key, val) {
						str2 += "<tr><td>" + key + "</td><td>" + val + "</td></tr>";
					});
					str2 += "</table>";
					$("#ret2").html(str2);
				} else {
					$("#ret2").empty();
				}
			}

		</script>
	</head>
	<body>
		<input type="text" id="txt1" />
		<input type="text" id="txt2" />
		<br />
		<input type="button" id="btn" value="ボタン" />
		<div id="msg">
			ここに結果
		</div>
		<br />
		<div id="ret1">
			ここにリスト
		</div>
		<br />
		<div id="ret2">
			ここにマップ
		</div>
	</body>
</html>


$.ajaxでサーバにリクエストを投げ、done、fail、alwaysでレスポンスを受け取ります。

$.ajaxの引数

引数 説明
contentType データ形式を指定します
url リクエスト先のURLを指定します
type POST/GETを指定します
data リクエスト先に渡すデータを指定します

レスポンス受け取りメソッド

メソッド 説明
done 正常終了時に呼ばれます。
引数は、data：戻り値オブジェクト文字列, status：処理ステータス, xhr：処理オブジェクトになります。
fail 異常終了時に呼ばれます。
引数は、xhr：処理オブジェクト, status：処理ステータス, error：エラー文字列になります。
always 正常、異常の両方で呼ばれます。
正常、異常で引数が変わります。正常時は、data, status, xhr、異常時は、xhr, status, errorになります。

JSONテキスト⇔オブジェクト変換

メソッド 説明
JSON.stringify(オブジェクト) JavaScriptオブジェクトをJSON文字列に変換します
JSON.parse(文字列) JSON文字列をJavaScriptオブジェクトに変換します

サーバ側の処理

PHPでサーバ処理を記述

ajax.php 
				
<?php

class Cls {
	var $ret;
	var $str;
	var $ary;
	var $map;
}

$obj = new Cls();

//送信データを取得
$json = file_get_contents("php://input");

//JSONから連想配列に変換
$data = json_decode($json, true);

if (count($data) == 0 || !isset($data['str1']) || !isset($data['str2'])) {

	$obj -> str = "引数str1,str2が指定されていません。" . count($data);
	$obj -> ret = "false";

} else {

	$str1 = $data['str1'];
	$str2 = $data['str2'];
	$obj -> str = $str1 . $str2 . "<BR />" . $_SERVER['REQUEST_METHOD'] . "で送信されました";
	$obj -> ret = "true";

	$obj -> map = array('A' => 'あいう', 'B' => '123', 'C' => 'abc');
	$obj -> ary = array('aaa', 'bbb', 'ccc');
}

//連想配列からJSONに変換
$result = json_encode($obj, JSON_UNESCAPED_UNICODE);

//処理結果を戻す(出力)
echo $result;
?>
JavaScriptから送られたJSON文字列をfile_get_contents関数で取得します。以下の形式で使用します。

file_get_contents("php://input")


JSON文字列はjson_decode関数でオブジェクトに変換します。以下の形式で使用します。

json_decode($json, true)


PHP側で一通り処理を行い、JavaScriptに戻すときにオブジェクトからJSON文字列に戻します。
JSON文字列に戻すにはjson_encode関数を使用します。以下の形式で使用します。

json_encode($obj, JSON_UNESCAPED_UNICODE)

JSON_UNESCAPED_UNICODEオプションを指定しないとマルチバイト Unicode文字で返されます。

Content-Typeを未指定

Content-Typeを指定しないと、Content-Typeはapplication/x-www-form-urlencodedになります。

クライアント側の処理

HTMLとJavaScript

Content-Typeを未指定で、JSON.stringifyも使用せずそのまま$.ajaxのdataにパラメータを渡しています。 
				
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>jQuery Test</title>
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
		<script type="text/javascript">
			$(function() {

				$("#btn").click(function() {

					var param = {
						str1 : $("#txt1").val(),
						str2 : $("#txt2").val()
					};
					$.ajax({
						url : "./test.php",
						type : "POST",
						data : param
					}).done(function(data, status, xhr) {
						// 正常
						show(data);
					}).fail(function(xhr, status, error) {
						// 異常
						$("#msg").append(xhr);
						$("#msg").append(":" + status);
						$("#msg").append(":" + error);
					}).always(function(data, status, xhr) {
						// 常に
					});
				});
			});

			function show(data) {
				var obj = JSON.parse(data);

				//ここに結果
				$("#msg").html(obj.str);

				//ここにリスト
				if (obj.ret == "true") {
					var str1 = "<table border='1'>";
					$.each(obj.ary, function(i, val) {
						str1 += "<tr><td>" + i + "</td><td>" + val + "</td></tr>";

						console.log(i + ': ' + val);
					});
					str1 += "</table>";
					$("#ret1").html(str1);
				} else {
					$("#ret1").empty();
				}

				//ここにマップ
				if (obj.ret == "true") {
					var str2 = "<table border='1'>";
					$.each(obj.map, function(key, val) {
						str2 += "<tr><td>" + key + "</td><td>" + val + "</td></tr>";
					});
					str2 += "</table>";
					$("#ret2").html(str2);
				} else {
					$("#ret2").empty();
				}
			}

		</script>
	</head>
	<body>
		<input type="text" id="txt1" />
		<input type="text" id="txt2" />
		<br />
		<input type="button" id="btn" value="ボタン" />
		<div id="msg">
			ここに結果
		</div>
		<br />
		<div id="ret1">
			ここにリスト
		</div>
		<br />
		<div id="ret2">
			ここにマップ
		</div>
	</body>
</html>

サーバ側の処理

PHPでサーバ処理を記述

Content-Type未指定の場合、$_POST変数で送信データを取得します。 
				
<?php

//送信データを取得
$str1 = $_POST['str1'];
$str2 = $_POST['str2'];

//戻り値になる連想配列をセット
$obj = [];
$obj['str'] = $str1 . $str2 . "<BR />" . $_SERVER['REQUEST_METHOD'] . "で送信されました";
$obj['ret'] = "true";
$obj['map'] = array('A' => 'あいう', 'B' => '123', 'C' => 'abc');
$obj['ary'] = array('aaa', 'bbb', 'ccc');

//連想配列からJSONに変換
$result = json_encode($obj, JSON_UNESCAPED_UNICODE);

//処理結果を戻す(出力)
echo $result;
?>

ページのトップへ戻る