如何从Golang服务器定期获取数据并更新HTML页面指定区域

DevOps 小满

2026-7-27

问题：Golang Web开发中定时更新页面指定区域图片

我是Golang及Web开发的新手，希望每隔300ms更新HTML页面的指定区域——canvas中绘制的图片，图片路径需从Golang服务器获取。我的JavaScript代码如下：

<script type="text/JavaScript">

  var refreshInterval = 300; // ms
  var img;
  
  function init() {
      var context = document.getElementById("canvas").getContext("2d");
      img = new Image();
      img.onload = function() {
          context.drawImage(this, 0, 0);
      };
      refresh();
  }

  function refresh()
  {
      img.src = "image.jpeg" // 这个路径我想从Golang服务器获取
      setTimeout("refresh()",refreshInterval);
  }
  </script>

我曾尝试使用Golang模板，但会导致整页重载，这并非我想要的效果。我的页面还有文本框、数值调节框等控件，整页重载会使我正在操作的控件失去焦点。

更新：已解决问题

我通过AJAX解决了问题，移除canvas改用标准img元素。现将代码分享如下：

JavaScript代码（依赖jQuery）

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js'></script>

    <script>
      var refreshInterval = 300; // ms

      $(document).ready(function () {
        setTimeout(updateImage, refreshInterval);
      });

      function updateImage()
      {
        $.ajax({ url: 'get-image',
                 type: 'get',
                 dataType: 'text',
                 success : function(data) {
                   $('#myImage').attr('src', data);
                 },
                });
        setTimeout(updateImage, refreshInterval);
      }
    </script>