新しいデータを更新するための非同期更新の方法はどれですか。

1年 ago
夏樹, 風
1 minute

非同期通信（ajax）という技術を使うと、PHPでページを更新することなく新しいデータを更新する方法が可能となる。以下は一般的な実装方法である。

  1. HTMLページ上でJavaScriptのAjaxメソッド（XMLHttpRequestなど）を使用して、非同期リクエストをサーバに送信し、PHPファイルから応答を取得する。
  2. 受け取ったリクエストをPHPファイルで処理し、更新する新しいデータを取得します。
  3. echo 文で JSON 形式のデータをレスポンスに出力するには、PHP から新しいデータを書き出します。
  4. サーバーから返されたレスポンスは、Ajaxメソッド内でコールバック関数によって処理されます。
  5. コールバック関数内で、取得した新しいデータを処理し、DOM操作を使用して新しいデータをページの指定された位置に挿入し、データの非更新更新を実現します。

以下に簡単なサンプルコードを記載します。

HTMLページ

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="data-container">
<!-- 初始数据 -->
<?php echo $initialData; ?>
</div>
<button id="update-data">更新数据</button>
<script>
$(document).ready(function() {
$("#update-data").click(function() {
$.ajax({
url: "update-data.php", // 发送请求的PHP文件
type: "GET",
dataType: "json",
success: function(data) {
// 在回调函数中处理返回的新数据
// 使用DOM操作将新数据插入到页面的指定位置
$("#data-container").html(data.newData);
}
});
});
});
</script>
</body>
</html>

update-data.phpファイル

<?php
// 处理更新数据的逻辑
$newData = ... ; // 获取新数据的操作，可以是数据库查询、文件读取等
$response = array("newData" => $newData);
echo json_encode($response); // 以JSON格式返回新数据
?>

上記のサンプルでは、「データ更新」ボタンをクリックすると、update-data.phpファイルへAjaxリクエストが送信され、update-data.phpファイル内でデータ更新処理が行われた後、更新後のデータがJSON形式で返されます。コールバック関数では取得された更新データを処理し、DOM操作を使用してページ内の指定箇所（サンプルではdata-container要素）に更新データを挿入します。これにより、PHPでデータを更新してもページを再読み込みせずに更新が行えるようになります。

bannerAds