Angular Ajax中出现ReferenceError: $ is not defined错误的解决方法

这个问题我日常开发中碰到过好多次，本质就是浏览器找不到jQuery的$标识符——要么是jQuery没加载，要么是加载时机不对，下面给你几个靠谱的解决办法：

• 先确认jQuery已经正确引入
  检查你的HTML代码里有没有添加jQuery的脚本标签。如果用CDN的话，比如：

  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
  

  如果是本地文件，要确保文件路径没写错，比如src="./assets/js/jquery.min.js"，别把相对路径搞混了。可以直接在浏览器控制台输入jQuery，如果能返回函数说明加载成功，否则就是没加载上。

• 调整脚本加载顺序
  这是最常见的坑！你自己的JS代码必须在jQuery之后加载。比如：

  <!-- 先加载jQuery -->
  <script src="jquery.min.js"></script>
  <!-- 再写你的业务代码 -->
  <script>
    $(document).ready(function() {
      // 你的代码逻辑
    });
  </script>
  

  要是你用了defer或async属性，也要注意确保jQuery的脚本先执行完毕，不然你的代码跑的时候jQuery还没加载好。

• 处理库冲突问题
  有时候其他JS库（比如Prototype、Zepto）也会用$当标识符，和jQuery冲突。这时候可以用两种方式解决：

  1. 直接用jQuery全名代替$：

     jQuery(document).ready(function() {
       jQuery("#target-element").addClass("active");
     });
     

  2. 用noConflict释放$的控制权：

     var jq = jQuery.noConflict();
     jq(document).ready(function() {
       jq("#target-element").addClass("active");
     });
     

• 排查CDN网络问题
  如果是用CDN加载jQuery，先确认你的网络能访问到CDN地址。可以直接把CDN的URL复制到浏览器地址栏，看看能不能正常下载文件。如果不行，换个稳定的CDN源，或者改成本地加载jQuery文件。

你可以先从检查加载顺序和是否正确引入jQuery开始排查，大部分情况都是这两个原因导致的。

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