如何在HTML文件中关联写有AJAX代码的外部JavaScript文件？

你的JS代码使用了jQuery语法，必须先引入jQuery依赖，再引入自己编写的JS文件，否则会出现$ is not defined的报错。以下是两种常用的引入方案：

方案1：将JS引入放在</body>标签之前（推荐） #

该方案会先加载完整HTML DOM结构再执行JS代码，可避免JS执行时找不到对应DOM元素的问题，示例代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <!-- 此处可放置CSS样式引入等内容 -->
</head>
<body>
    <!-- 页面业务内容，你代码中用到的 #sq-two 元素需要写在这里 -->
    <div id="sq-two">测试元素</div>

    <!-- 第一步：先引入jQuery（可引入本地jQuery文件或合法公共CDN地址） -->
    <script src="./jquery-3.6.4.min.js"></script>
    <!-- 第二步：引入你自己编写的JS文件，此处假设JS文件名为custom.js，和HTML文件同级存放 -->
    <script src="./custom.js"></script>
</body>
</html>

如果你的JS文件存放在其他目录，修改src属性中的路径即可，比如放在js文件夹下就写src="./js/custom.js"。

方案2：将JS引入放在<head>标签中 #

如果需要将JS引入放在头部，必须给script标签加defer属性，保证JS会等HTML加载完成后再执行：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>示例页面</title>
    <!-- 引入jQuery -->
    <script src="./jquery-3.6.4.min.js" defer></script>
    <!-- 引入自定义JS，添加defer属性 -->
    <script src="./custom.js" defer></script>
</head>
<body>
    <!-- 页面业务内容 -->
    <div id="sq-two">测试元素</div>
</body>
</html>

补充注意事项 #

• 引入顺序不可调换：必须先引入jQuery，再引入你自己编写的JS文件，否则JS执行时依赖的jQuery环境未加载会报错
• 你可以按需绑定spin函数的触发逻辑，比如添加按钮点击触发：

<button onclick="spin()">触发旋转效果</button>

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