医疗模拟场景下如何使用AJAX与jQuery实现Web页面A推送更新至Web页面B？

核心逻辑前置说明 #

跨设备的A、B页面数据同步无法仅靠纯前端技术实现——不同设备的浏览器是独立运行的实例，A页面的输入值无法被B设备的浏览器直接读取，必须搭配一个轻量的中转后端服务完成数据的存储与分发。你提到的jQuery+AJAX技术栈完全可以支撑这个需求，不需要额外引入复杂的框架。

很多开发者初期会尝试用localStorage监听事件实现跨页面同步，但这类方法仅适合同一设备的浏览器标签页，跨设备场景下完全不生效。

分阶段实现路径 #

快速原型方案（基于AJAX轮询，适合1小时内搭完可测试的版本） #

这套方案完全匹配你最初的技术选型，开发门槛最低，适合快速验证流程：

1. 整体流程
   • 搭一个极简后端服务，用内存变量存储最新的生命体征数值，不需要接入数据库、不需要持久化（模拟场景下重启清空数据完全不影响使用），仅提供两个接口：
     • 接收A页面提交的输入值，更新内存中存储的最新体征数据
     • 向B页面返回当前存储的最新体征数据
   • 页面A（控制端）：绑定输入框取值、按钮点击事件，通过jQuery的AJAX把输入的生命体征值POST到后端的更新接口
   • 页面B（监护模拟端）：设置固定间隔（1-2秒），通过jQuery的AJAX定时请求后端的查询接口，拿到最新值后更新监护仪样式的展示DOM，不需要刷新页面
2. 核心代码示例
   • 页面A控制端关键逻辑：

   // 点击推送按钮时提交数据
   $('#pushVitalsBtn').on('click', function() {
     const inputData = {
       heartRate: $('#hrInput').val(),
       systolicBp: $('#sbpInput').val(),
       diastolicBp: $('#dbpInput').val(),
       spo2: $('#spo2Input').val()
     }
     // 通过AJAX把数据发送到后端中转接口
     $.ajax({
       url: '/api/save-vitals',
       type: 'POST',
       data: inputData
     })
   })
   

   • 页面B监护端关键逻辑：

   // 每2秒拉取一次最新体征值，更新监护屏
   setInterval(() => {
     $.ajax({
       url: '/api/get-latest-vitals',
       type: 'GET',
       success: (res) => {
         // 把返回的数值更新到监护仪对应的DOM位置
         $('.hr-value').text(res.heartRate || '--')
         $('.sbp-value').text(res.systolicBp || '--')
         $('.dbp-value').text(res.diastolicBp || '--')
         $('.spo2-value').text(res.spo2 || '--')
       }
     })
   }, 2000)
   

低延迟优化方案 #

如果觉得轮询间隔的延迟不够实时，可以把B页面的定时拉取逻辑替换为WebSocket长连接：

• A页面提交数据时，通过长连接直接把最新值广播给所有在线的B页面
• B页面收到后端推送的消息后，直接更新DOM，不需要主动发请求拉取数据，延迟可以降到毫秒级，适合需要连续调整模拟参数的场景

医疗模拟场景适配注意事项 #

• 所有控制端、展示端平板、中转后端全部部署在同一局域网内，不需要暴露到公网，避免模拟数据外传，符合医疗教学的安全要求
• 给监护屏页面加禁止屏幕自动休眠的配置，防止模拟过程中平板锁屏中断展示
• 监护屏的样式可以参考真实医院监护仪的布局，设置大字体、高对比度配色，方便学习者远距离观察数值变化

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