ＳＱＬの窓
<< ロリポップの phpMy… | TOP | PHP : 指定ファイル… >>

2020年06月07日


jQuery の $.get を使用した ajax のテンプレート

 
ファイルのアップロードや FormData オブジェクトを使う場合は、$.ajax を使用しますが、簡単なデータの参照であればこれで十分ですし、PHP 側との連携のサンプルとして PHP の機能部分もいろいろ意味があります。

ブラウザ側

<!DOCTYPE html>
<html>
<head>
<meta content="width=device-width initial-scale=1.0 minimum-scale=1.0 maximum-scale=1.0 user-scalable=no" name="viewport">
<meta http-equiv="Content-type" content="text/html; charset=utf-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.css" />


<script>

$(function(){

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

		// TABLE データ部分のクリア	
		$("#tbl").html("");

		$.get({
			url: "https://yourdomain.jp/test1.php",
			cache: false,
			data: { "scode" : $("#scode").val() }
		})
		.done(function( data, textStatus ){
			console.log( "status:" + textStatus );
			//console.log( "data:" + JSON.stringify(data, null, "    ") );

			$.each(  data, function( index, obj ){
				console.log( obj.scode + " : " + obj.sname ) ;

				var row = $("<tr></tr>");
				$( "<td></td>" ).text( obj.scode ).appendTo( row );
				$( "<td></td>" ).text( obj.sname ).appendTo( row );
				$( "<td></td>" ).text( obj.furi ).appendTo( row );
				$( "<td></td>" ).text( obj.syozoku ).appendTo( row );
				$( "<td></td>" ).text( obj.gender ).appendTo( row );
				$( "<td></td>" ).text( obj.create ).appendTo( row );
				$( "<td></td>" ).text( obj.update ).appendTo( row );
				$( "<td></td>" ).text( obj.kyuyo ).appendTo( row );
				$( "<td></td>" ).text( obj.teate ).appendTo( row );
				$( "<td></td>" ).text( obj.boss ).appendTo( row );
				$( "<td></td>" ).text( obj.birthday ).appendTo( row );
				$( "#tbl" ).append( row );

			});

		})
		.fail(function(jqXHR, textStatus, errorThrown ){
			console.log( "status:" + textStatus );

		})
		.always(function() {
			//console.log("いつも通る");
		})
		;
	});


});

</script>

<style>
td {
	white-space: nowrap;
}
</style>

</head>
<body>

<input type="text" id="scode" style='width:60px;' value="0001" maxlength="4">
<input class="btn btn-primary mb-3 ml-3" id="btn" name="btn" type="button" value="実行">

<table class="table table-striped table-hover table-responsive">
	<tbody id="tbl">
	</tbody>
</table>


</body>
</html>


$.get の cache: false は、内部で番号が QueryString に与えられます。確認はデベロッパーツールの Network で可能です。

done で php 側のエラー時の処理は未実装ですが、obj.status を typeof でチェック( "undefined" )すればいいでしょう

bootstrap で容易にレスポンシブのテーブルが作成できます。bootstrap では、tbody が必要です。


サーバ側 ( test1.php ) / ロリポップ使用

<?php
error_reporting( E_ALL & ~E_NOTICE & ~E_STRICT & ~E_DEPRECATED );
session_cache_limiter('nocache');
session_start();

header( "Content-Type: application/json; charset=utf-8" );
header( "Access-Control-Allow-Origin: *" );

$dsn = 'mysql:host=mysql145.phy.lolipop.lan;dbname=LAA1234567-contactsphp';
$user = '1234567';
$password = "password";

try {

	// ***************************
	// 接続
	// ***************************
	$dbh = new PDO($dsn, $user, $password);
	$dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);

}
catch (PDOException $e) {

	print '接続に失敗しました: ' . $e->getMessage();
	exit;

}

$sql = <<<SQL

select * from 社員マスタ where 社員コード <= ?

SQL;

try {

	$stmt = $dbh->prepare($sql);
	$stmt->bindValue(1, $_GET["scode"], PDO::PARAM_STR);
	$stmt->execute();

	$json = [];

	while ($row = $stmt->fetch(PDO::FETCH_BOTH, PDO::FETCH_ORI_NEXT)) {

		$obj = new stdClass;
		$obj->scode = $row["社員コード"];
		$obj->sname = $row["氏名"];

		$obj->furi = $row["フリガナ"];
		$obj->syozoku = $row["所属"];
		$obj->gender = $row["性別"];
		$obj->create = $row["作成日"];
		$obj->update = $row["更新日"];
		$obj->kyuyo = $row["給与"];
		$obj->teate = $row["手当"];
		$obj->boss = $row["管理者"];
		$obj->birthday = $row["生年月日"];

		$json[] = $obj;

	}
	
	print json_encode($json, JSON_UNESCAPED_UNICODE | JSON_PRETTY_PRINT);

	// ***************************
	// ステートメントの解放
	// ***************************
	$stmt = null;
}
catch (Exception $e) {

	print <<<ERRJSON
	{
		"status" : "error"
	}
ERRJSON;

}

?>


Content-Type: application/json によって、jQuery 側では受けたデータが JSON オブジェクトになります

Access-Control-Allow-Origin: * によって、他のドメインからこの PHP を呼び出す事ができるようになります( そもそも、http から https は呼び出せませんが )

setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION) は接続より後の処理で try 〜 catch が使えるようにします

json_encode では、テスト中は内容をチェックしやすいようにエスケープせずに整形してあります
【jQueryの最新記事】
posted by lightbox at 2020-06-07 17:44 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり