时间戳

首页 > 解决方案 > 如何在不刷新 2 个或多个用户页面之间的页面的情况下获取数据

javascript - 如何在不刷新 2 个或多个用户页面之间的页面的情况下获取数据

问题描述

嗨，我正在我们的工厂制作进度控制页面。我用 mysql，php 制作系统。

一切都完成了，但我想知道的只有一件事：

现在，如果有人从系统中更改/添加/删除数据，其他人必须刷新页面才能看到新数据......

没有任何人刷新任何页面，一切如何改变？

有没有这样的途径或文档等？

谢谢。

标签： javascriptphpmysql

解决方案

您可以使用 javascript（更准确地说是 jQuery 的 ajax）定期在后台更新您的页面（无需刷新）

它基本上向端点（网址）发送一个请求，然后当结果返回时，调用你的回调函数对数据做任何你想做的事情

你可以从这里开始https://www.w3schools.com/jquery/ajax_ajax.asp

更多解释

这是一个使用 ajax 的后台异步请求的工作示例，它是一个简单的页面，它每秒获取比特币的当前汇率（来自公共 API）并显示它。

启动和运行它真的很简单，而且它还有很多更多的功能（比如发送自定义标头、发送 POST 或其他请求、在正文中发送数据等）

function fetchData() {
  $.ajax({
    url: 'https://api.coinranking.com/v1/public/coin/1',
    success: function(data) {
      $('#value').html(parseFloat(data.data.coin.price).toFixed(3));
      let d = new Date();
      $('#time').html(`${d.getFullYear()}/${(d.getMonth() + 1).toString().padStart(2, '0')}/${d.getDate().toString().padStart(2, '0')} ${d.getHours().toString().padStart(2, '0')}:${d.getMinutes().toString().padStart(2, '0')}:${d.getSeconds().toString().padStart(2, '0')}`);
    }
  })
}
$(document).ready(function() {
  fetchData();
  window.setInterval(fetchData, 1000)
})
.main {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.value {
  font-weight: bold;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='main'>
  <p class='title'>Current Bitcoin exchange rate:</p>
  <span class='value'><span id="value">0</span><span>$</span></span>
  <p>(As of <span id='time'></span>)</p>
  <div>

推荐阅读