HTMLからPHPを呼び出して、DBデータを取得、表示する
公開日: 2024-04-23 00:29:13
更新日: 2024-04-23 00:30:20
今回はHTMLからPHPのselect.phpを呼び出して、データベースから値を取得するコードを書いていきます。
javascriptを直接scriptタグで囲ってしまって、埋め込みましたが別の場所に配置した方がHTMLとしてはすっきりするのでいいと思います。
select.php
<?php
// テスト環境
$servername = "localhost";
$username = "root";
$password = "root";
$dbname = "testDB";
// MySQLへの接続を確立
$conn = new mysqli($servername, $username, $password, $dbname);
// 接続の確認
if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}
// オフセットとリミットを取得
$offset = isset($_GET['offset']) ? (int)$_GET['offset'] : 0;
$limit = isset($_GET['limit']) ? (int)$_GET['limit'] : 10; // 既定値は10
// SQLクエリを作成（TESTDB1234テーブルから指定された範囲のデータを取得）
$sql = "SELECT * FROM TESTDB1234
ORDER BY DATE DESC
LIMIT $limit OFFSET $offset";
$result = $conn->query($sql);
// データの取得と出力
if ($result->num_rows > 0) {
$data = array();
while($row = $result->fetch_assoc()) {
$data[] = $row;
}
// JSON形式で出力
header('Content-Type: application/json');
echo json_encode($data);
} else {
// レコードが見つからない場合もJSONで通知
header('Content-Type: application/json');
echo json_encode(["message" => "No records found!"]);
}
// 接続を閉じる
$conn->close();
?>
test.html
<body>
<!-- 掲示板の投稿を表示するコンテナ -->
<div id="posts-container"></div>
<script>
// ページが読み込まれたら、投稿をロードする
document.addEventListener('DOMContentLoaded', function() {
fetchPosts();
});
// select.phpで取得した内容を表示する
function fetchPosts() {
fetch('select.php')
.then(response => {
if (!response) {
throw new Error('Response is undefined');
}
if (!response.ok) {
throw new Error('Network response was not ok');
}
return response.json();
})
.then(data => {
const postsContainer = document.getElementById('posts-container');
postsContainer.innerHTML = ''; // コンテナをクリア
data.forEach(post => {
postsContainer.innerHTML += `
<div class="post">
<div class="post-date">${escapeHTML(post.DATE)}</div>
<div class="post-quest">${escapeHTML(post.QUEST)}</div>
<div class="post-maintext">${escapeHTML(post.MAINTEXT)}</div>
<div class="item">${post.EMOJI || ''}</div>
</div>
`;
});
})
.catch(error => {
console.error('Error fetching posts:', error);
});
}
// XSS攻撃を防ぐためにHTMLをエスケープする関数
function escapeHTML(str) {
return str.replace(/[&<>'"]/g, tag => ({
'&': '&',
'<': '<',
'>': '>',
'\'': ''',
'"': '"'
}[tag] || tag));
}
</script>
</body>
ハマったところ
// JSON形式で出力
header('Content-Type: application/json');
echo json_encode($data);この部分のheader('Content-Type: application/json');を書いてあげないとHTML側で値が受け取れないです。
まだまだ勉強中ですが、
HTML→PHP→DBから値を取得→HTMLに表示はこのような形でできました。