ファイルのアップロードや 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 では、テスト中は内容をチェックしやすいようにエスケープせずに整形してあります
一度 Sources で変更すると、たぶんブラウザのキャッシュに残って、今のところ作業中はずっと変わっています。
しかも、デベロッパーツールを閉じても有効みたいで、css のキャッシュの強さ( QueryStringでキャッシュ対応したり結構面倒ですよね )を逆手に取った形でしょうか
全くの初心者向けというか、PHP が何か解らない人向けです。HTML の構造と投稿データの関係を明確にする為に、
※ エキスパートモードで表示しています
アーカイブとカテゴリページはこのように簡単に設定できますが、タグページは HTML 設定を直接変更して、以下の『タグページでのみ表示される内容』の記述方法で設定する必要があります
