如何基于API响应修改HTML页面内容，共享主机无Node.js场景如何实现

你现有场景完全不需要跑Node.js，核心逻辑用「状态中转文件+前端轮询」就可以实现，步骤如下：

• 首先在共享主机根目录新建两个文件：update_status.php 和 status.json
• 给status.json设置可写权限（一般设为755即可），初始内容写：{"status": "up"}
• 把update_status.php的URL填到healthchecks.io的告警回调地址里，配置healthchecks服务异常时发POST请求到这个地址，携带状态参数
• update_status.php 代码示例：

<?php
// 简单鉴权，防止恶意修改，把下面的密钥换成你自己的，同时加到healthchecks的回调参数里
$secret = 'your_custom_secret_here';
if ($_POST['secret'] !== $secret) die('invalid request');

$status = $_POST['status'] === 'down' ? 'down' : 'up';
file_put_contents('status.json', json_encode(['status' => $status]));
?>

• 然后在你现有HTML页面里加原生JS代码，定时拉取status.json的内容修改p元素：

// 假设你的p元素id是service-status
const statusEl = document.getElementById('service-status');
// 每30秒拉一次状态，可自行调整间隔
function updateStatus() {
  fetch('/status.json')
    .then(res => res.json())
    .then(data => {
      if (data.status === 'up') {
        statusEl.textContent = '正常运行';
        statusEl.style.color = 'green';
      } else {
        statusEl.textContent = '离线';
        statusEl.style.color = 'red';
      }
    })
    .catch(() => {
      // 拉取失败也可以设为离线状态
      statusEl.textContent = '离线';
      statusEl.style.color = 'red';
    });
}
updateStatus();
setInterval(updateStatus, 30000);

该方案完全不需要改动你原有的CSS、其他页面资源，只需要加几行JS，符合你共享主机不能跑Node.js的限制。

如果你后续换了支持Node.js的服务器，用Express实现也不需要改动原有静态资源，只要用路由拦截+字符串替换的方式修改指定内容即可，步骤如下：

• 把你原有的所有网站静态文件（HTML、CSS、JS、图片等）都放到Express项目的public文件夹下
• 不需要把原有HTML改成模板文件，直接匹配替换指定内容即可，核心代码示例：

const express = require('express');
const fs = require('fs');
const path = require('path');
const app = express();

// 全局存储服务状态，初始为正常
let serviceStatus = 'up';

// 接收healthchecks.io的状态更新请求
app.post('/update-status', express.json(), (req, res) => {
  // 同样加个简单鉴权
  if (req.body.secret !== 'your_custom_secret_here') return res.sendStatus(403);
  serviceStatus = req.body.status === 'down' ? 'down' : 'up';
  res.sendStatus(200);
});

// 拦截HTML页面请求，替换状态内容
app.get('/', (req, res) => {
  const htmlPath = path.join(__dirname, 'public', 'index.html');
  let htmlContent = fs.readFileSync(htmlPath, 'utf8');
  // 替换指定p标签的内容和样式，你也可以给p加个特殊标记方便匹配
  if (serviceStatus === 'up') {
    htmlContent = htmlContent.replace('<p id="service-status">', '<p id="service-status" style="color:green">正常运行');
  } else {
    htmlContent = htmlContent.replace('<p id="service-status">', '<p id="service-status" style="color:red">离线');
  }
  res.send(htmlContent);
});

// 其他静态资源正常托管，CSS、JS、图片都不会被修改
app.use(express.static(path.join(__dirname, 'public')));

app.listen(3000, () => console.log('server running'));

该方案可以完整保留你原有的所有静态资源，只会在返回HTML的时候修改指定的p标签内容，不需要改动原页面的其他代码。

内容的提问来源于stack exchange，提问作者Syntaxis