$.ajax is not a function 问题解决

最新推荐文章于 2025-03-07 22:44:53 发布

疯魔coding君

最新推荐文章于 2025-03-07 22:44:53 发布

阅读量1.5w

点赞数 15

分类专栏：前端开发学习笔记文章标签： ajax jquery

本文链接：https://blog.csdn.net/qq_44214671/article/details/113320568

版权

前端开发学习笔记专栏收录该内容

14 篇文章

订阅专栏

在使用 JQuery 的 Ajax 封装调试时，浏览器控制台报错：
在这里插入图片描述
代码如下：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JQuery中Ajax的基本使用</title>
</head>
<body>
<button id="btn">JQuery中Ajax的基本使用</button>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script>
    $("#btn").click(function () {
        $.ajax({
            type: "post",
            url: "http://httpbin.org/post",
            // data: 'uname=lrq&pwd=123',
            data: JSON.stringify({
                'uname': 'lrq',
                'pwd': '123'
            }),
            contentType: "application/json",
            success: function (resp) {
                console.log(resp);
            }
        });
    })
</script>
</body>
</html>

查明原因后发现我采用的是 CDN 的 JQuery 引用，所引用的 JQuery 是 slim 版本的，当中移除了一些东西，包括 Ajax 部分。

该问题有如下几种解决方式：

1.JQuery CDN 在线引用其他版本：

非压缩版本

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>

压缩版本

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

其他引用版本可查看如下链接：https://www.bootcdn.cn/jquery/

2.直接下载 JQuery 的 js 文件，然后进行引用即可：

在这里插入图片描述

非压缩版本

<script src="jquery/jquery-3.5.1.js"></script>

压缩版本

<script src="jquery/jquery-3.5.1.min.js"></script>

采用上述一种解决方法后，再次运行上述代码：
在这里插入图片描述
请求成功，并顺利获取到了响应数据。