计科知识库 计科知识库 21天前

json php ajax 实现文章浏览量统计功能 不用数据库 用json记录统计量

json php ajax

要实现一个使用 JSON 文件记录浏览量的功能，你可以通过以下步骤来实现一个简单的文章浏览量统计功能，不依赖于数据库。这种方法适用于简单的项目或学习目的，但在实际生产环境中，使用数据库会更可靠、高效。

步骤 1: 创建 JSON 文件

首先，你需要一个 JSON 文件来存储每篇文章的浏览量。假设我们有一个名为 views.json 的文件，内容如下：

  1. {
  2.     "articles": {
  3.         "article1": 0,
  4.         "article2": 0
  5.     }
  6. }

步骤 2: 创建 PHP 脚本更新浏览量

你可以创建一个 PHP 脚本，当用户访问文章时，这个脚本会被调用并更新浏览量。

  1. <?php
  2. $filename = 'views.json'; // JSON 文件名
  3. $articleId = $_GET['id'] ?? 'article1'; // 获取文章ID，默认为 article1
  5. // 读取当前 JSON 数据
  6. $data = file_get_contents($filename);
  7. $views = json_decode($data, true);
  9. // 检查文章是否存在，如果不存在则初始化
  10. if (!isset($views['articles'][$articleId])) {
  11.     $views['articles'][$articleId] = 0;
  12. }
  14. // 增加浏览量
  15. $views['articles'][$articleId]++;
  17. // 将更新后的数据写回文件
  18. file_put_contents($filename, json_encode($views, JSON_PRETTY_PRINT));
  19. ?>

步骤 3: 创建 HTML 和 JavaScript 以触发浏览量更新

你可以创建一个简单的 HTML 文件来显示文章，并通过 JavaScript 调用这个 PHP 脚本来更新浏览量。

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Article View Counter</title>
  6. </head>
  7. <body>
  8.     <h1>Article Title</h1>
  9.     <p>This is an example article.</p>
  10.     <p>Views: <span id="viewCount">0</span></p>
  11.     <button onclick="updateViewCount()">Refresh View Count</button>
  12.     <script>
  13.         function updateViewCount() {
  14.             fetch('updateViews.php?id=article1') // 根据需要调整文章ID和文件名
  15.                 .then(response => response.json()) // 这里其实不需要解析成JSON，因为我们只是触发更新，不返回数据。但为了示例完整性，我们仍处理响应。
  16.                 .then(data => {
  17.                     document.getElementById('viewCount').innerText = data.articles.article1; // 这里仅为示例，实际应从服务器获取最新数据。
  18.                 })
  19.                 .catch(error => console.error('Error:', error));
  20.         }
  21.     </script>
  22. </body>
  23. </html>

注意‌：上面的 JavaScript 示例中，我们实际上并不需要每次都从服务器获取最新的浏览量。更好的做法是只在页面加载时获取一次浏览量，然后在 updateViews.php 中不返回任何 JSON 数据（即直接返回或仅输出 HTTP 状态码），而是仅仅更新文件。这样可以减少不必要的网络请求和服务器负载。例如：

  1. <?php
  2. // updateViews.php 简化版，仅更新文件，不返回任何数据。
  3. $filename = 'views.json'; // JSON 文件名
  4. $articleId = $_GET['id'] ?? 'article1'; // 获取文章ID，默认为 article1
  5. $data = file_get_contents($filename); // 读取当前 JSON 数据
  6. $views = json_decode($data, true); // 解码为数组
  7. if (!isset($views['articles'][$articleId])) { $views['articles'][$articleId] = 0; } // 检查并初始化文章浏览量计数器（如果需要）
  8. $views['articles'][$articleId]++; // 增加浏览量计数器值。
  9. file_put_contents($filename, json_encode($views, JSON_PRETTY_PRINT)); // 将更新后的数据写回文件。
  10. header('Content-Type: application/json'); // 设置返回内容类型为 JSON（虽然在简化版中实际上不需要返回数据）
  11. echo json_encode(['status' => 'updated']); // 可选：返回状态信息，但不实际需要返回更新的浏览量数据。仅用于演示。
  12. ?>

然后在 HTML 中，你可以这样获取初始浏览量并稍后通过按钮更新：

  1. document.addEventListener('DOMContentLoaded', function() {
  2.     fetch('initialViews.php?id=article1') // 获取初始浏览量（可以创建一个单独的 PHP 文件来仅返回当前浏览量）