JavaScript调用API时出现Uncaught ReferenceError: $ is not defined如何解决

错误原因 #

• 核心错误：jQuery引入方式错误。你在HTML的<head>标签中使用了CSS专属的<link>标签加载jQuery的JS文件，浏览器不会识别执行该文件，因此全局$变量未定义，调用时报错。
• 次要问题：main.js中拼接的API url存在多余换行和空格，请求时会被带入请求地址中，导致接口请求失败。

修复方案 #

1. 替换HTML中的jQuery引入代码
   把<head>标签中原来的jQuery引入行：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js">

替换为JS文件专用的<script>标签引入：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

2. 修复main.js中的url拼接逻辑，去掉多余的换行和空格：
   修复后的完整main.js代码如下：

$("#form").submit(function(e) {
    e.preventDefault()
    var query = $('#search').val()
    var API_KEY = '68e5388d12762a96f2d8a75bd05d285d'
    // 去掉url中的多余换行和空格，避免无效字符被带入请求
    var url = `http://api.serpstack.com/search?access_key=${API_KEY}&type=web&query=${query}`
    $.get(url, function(data) {
        console.log(data)
    })
})

完成以上两处修改后刷新页面即可正常触发请求输出返回数据。

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