如何在Node+EJS项目中正确引入spin.js并实现AJAX加载动画

错误原因分析 #

你遇到的两个错误是直接关联的：

• Uncaught SyntaxError: Unexpected token export：Spin.js的源码采用了ES模块语法（export { Spinner }），但你用普通的<script>标签引入时，浏览器会把它当作传统脚本执行，无法识别ES模块的export关键字。
• Uncaught ReferenceError: Spinner is not defined：因为模块没有正确加载，全局作用域里自然找不到Spinner类。

解决方案：两种方式正确加载Spin.js #

方式一：使用ES模块引入（推荐）

现代浏览器都支持ES模块，只需修改你的脚本标签为type="module"，然后用import语句引入Spinner即可：

<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>
<script type="module">
// 从你的静态文件路径引入Spinner
import { Spinner } from '/scripts/spin.js/spin.js';

var opts = {
  lines: 20,
  length: 0,
  width: 15,
  radius: 42,
  scale: 0.85,
  corners: 1,
  color: '#41d62b',
  fadeColor: 'transparent',
  opacity: 0.05,
  rotate: 0,
  direction: 1,
  speed: 1,
  trail: 74,
  fps: 20,
  zIndex: 2e9,
  className: 'spinner',
  top: '50%',
  left: '50%',
  shadow: 0,
  position: 'absolute'
};

// 初始化Spinner（先不启动，留到AJAX请求时触发）
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts);
</script>

注意：Node.js的静态文件服务（比如Express的express.static）完全支持ES模块的加载，所以不需要额外配置。

方式二：使用UMD版本的Spin.js

如果你更倾向于传统脚本引入，可以使用Spin.js的UMD（通用模块定义）版本。这个版本会将Spinner挂载到全局window对象上，无需import：

1. 去Spin.js的官方发布包中找到spin.umd.js（类似命名）文件，放到你的/scripts/spin.js/目录下
2. 修改引入代码：

<div id="spinnerContainer" class="spinner" style="width:100px;height:100px;background-color: Gray; color:black;">
</div>
<script src="/scripts/spin.js/spin.umd.js" type="text/javascript"></script>
<script>
var opts = { /* 你的配置项 */ };
var target = document.getElementById('spinnerContainer');
var spinner = new Spinner(opts); // 直接使用全局的Spinner
</script>

如果找不到现成的UMD版本，不建议手动修改源码，最好通过npm安装后打包（比如用Webpack/Rollup）生成UMD格式文件。

结合AJAX请求控制Spinner的启动/停止 #

现在Spinner已经能正确初始化了，接下来添加AJAX请求的触发逻辑：

示例1：使用jQuery AJAX

// 假设你有一个提交按钮
$('#submitBtn').on('click', function() {
  // 启动Spinner
  spinner.spin(target);

  $.ajax({
    url: '/your-post-endpoint', // 你的POST接口地址
    method: 'POST',
    data: { /* 提交的数据 */ },
    success: function(response) {
      // 请求成功：停止Spinner并处理响应
      spinner.stop();
      console.log('请求成功:', response);
    },
    error: function(xhr) {
      // 请求失败：同样停止Spinner并处理错误
      spinner.stop();
      console.error('请求失败:', xhr);
    }
  });
});

示例2：使用原生Fetch API

document.getElementById('submitBtn').addEventListener('click', async function() {
  // 启动Spinner
  spinner.spin(target);

  try {
    const response = await fetch('/your-post-endpoint', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ /* 提交的JSON数据 */ })
    });

    if (!response.ok) throw new Error('请求失败');
    const data = await response.json();
    
    // 处理成功响应
    console.log('请求成功:', data);
  } catch (error) {
    // 处理错误
    console.error('请求出错:', error);
  } finally {
    // 无论成功或失败，最终都停止Spinner
    spinner.stop();
  }
});

内容的提问来源于stack exchange，提问作者A. Monteiro