浏览器控制台报错：Uncaught TypeError: $.ajax is not a function 求助

看到你遇到的这个报错，我来帮你排查几个常见的原因，结合你的代码给出针对性的解决方案：

1. 先确认jQuery是否完整加载 #

虽然你引入了jQuery 3.3.1，但有时候可能因为网络波动、CDN链路问题导致库没有完全加载成功。你可以在浏览器控制台直接输入$或者jQuery，如果返回undefined，说明jQuery根本没加载进来：

• 可以换一个更稳定的CDN源试试，比如官方的完整版链接：

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

• 或者直接下载jQuery文件到本地项目中，用相对路径引入，彻底避免网络加载问题。

2. 检查是否误引入了jQuery Slim版本 #

jQuery的Slim版本会刻意移除$.ajax、$.ajaxSetup这类AJAX相关方法，如果你不小心引入了带-slim后缀的版本，就会触发这个报错。你的引入链接是jquery-3.3.1.js，这个是完整版，但还是建议你打开这个链接确认下文件内容里是否包含$.ajax方法。

3. 处理其他JS库的冲突问题 #

如果你的页面还引入了其他JavaScript库（比如Prototype、MooTools），这些库可能会占用$变量，导致$不再指向jQuery。这时候有两种解决方式：

方式一：直接用jQuery代替$ #

修改你的代码，把所有$替换成jQuery即可：

jQuery(document).ready(function() {
  jQuery("#id_name_task").click(function() {
    var name_task = jQuery(this).val();
    console.log(name_task);
    jQuery.ajax({
      type: 'GET',
      async: true,
      dataType: 'json',
      url: '/validate_data/',
      data: { 'name_task': name_task },
      success: function(data) {
        if (data.is_taken) {
          alert("A task with this name already exists.");
        }
      },
    });
  });
});

方式二：用noConflict()释放$控制权 #

在jQuery引入之后，添加一段代码释放$，自定义一个变量来指代jQuery：

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.js"></script>
<script>
var $j = jQuery.noConflict();
</script>

之后用$j代替$来调用jQuery方法即可，其他代码逻辑保持不变。

4. 确认脚本执行顺序 #

你现在的代码结构是先引入jQuery再写自定义脚本，这个顺序是正确的，但还是要确保没有其他因素导致脚本提前执行。比如如果你的jQuery脚本标签加了async或defer属性，可能会导致自定义脚本执行时jQuery还没加载完成，去掉这些属性即可。

你可以先在控制台输入$.ajax，如果返回的是一个函数，说明jQuery加载正常，那大概率是库冲突的问题；如果返回undefined，那就是jQuery没加载成功，优先解决加载问题。

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