我的 javascript 返回此错误:$.ajax 不是函数

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/44212202/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 02:23:42  来源:igfitidea点击:

My javascript is returning this error: $.ajax is not a function

javascriptjqueryajaxtypeerror

提问by Adamwuh

Not sure what's wrong but I'm getting this error from my chrome console:

不知道出了什么问题,但我从我的 chrome 控制台收到此错误:

jquery-3.2.1.slim.min.js:1244 jQuery.Deferred exception: $.ajax is not a function TypeError: $.ajax is not a function
    at HTMLDocument.<anonymous> (file:///C:/Users/Adam/Desktop/UseTime/js/example.js:3:7)
    at j (file:///C:/Users/Adam/Desktop/UseTime/js/jquery-3.2.1.slim.min.js:1193:55)
    at k (file:///C:/Users/Adam/Desktop/UseTime/js/jquery-3.2.1.slim.min.js:1199:45) undefined
r.Deferred.exceptionHook @ jquery-3.2.1.slim.min.js:1244
jquery-3.2.1.slim.min.js:1247 Uncaught TypeError: $.ajax is not a function
    at HTMLDocument.<anonymous> (example.js:3)
    at j (jquery-3.2.1.slim.min.js:1193)
    at k (jquery-3.2.1.slim.min.js:1199)

From this JavaScript:

从这个JavaScript:

$(function() { //when the DOM is ready
    var times; //declare global variable
    $.ajax({ //set up request
        beforeSend: function (xhr) { //before requesting data
            if (xhr.overrideMimeType) { //if supported
                xhr.overrideMimeType("application/json"); // set MIME to prevent errors
            }
        }
    });
    //funciton that collect data from the json file
    function loadTimetable() { //decalre function
        $.getJSON('data/example.json') //try to collect json data
            .done(function (data) { //if succesful
                times = data; //store in variable
            }).fail(function () { //if a problem: show message
                $('#event').html('Sorry! we couldnt load your time table at the moment');
            });
    }
    loadTimetable(); //call the function

    //CLICK ON TEH EVENT TO LOAD A TIME TABLE
    $('#content').on('click', '#event a', function (e) { //user clicks on place
        e.preventDefault(); //prevent loading page
        var loc = this.id.toUpperCase(); //get value of id attr
        var newContent = "";
        for (var i = 0; i < times[loc].length; i++) { // loop through sessions
            newContent += '<li><span class = "time">' + times[loc][i].time + '</span>';
            newContent += '<a href = "descriptions.html#';
            newContent += times[loc][i].title.replace(/ /g, '-') + '">';
            newContent += times[loc][i].title + '</a></li>';
        }
        $('#sessions').html('<ul>' + newContent + '</ul>'); // Display Time
        $('#event a.current').removeClass('current'); // update selected link
        $(this).addClass('current');
        $('#details').text('');
    });

    //CLICK ON A SESSION TO LEAD THE DESCRIPTION
    $('#content').on('click', '#sessions li a', function (e) { //click on session
        e.preventDefault(); // prevent loading
        var fragment = this.href; //title is in href
        fragment = fragment.replace('#', ' #'); //Add Space before #
        $('#details').load(fragment); //to load info
        $('#sessions a.current').removeClass('current'); //update selected
    });

    //CLICK ON PRIMARY NAVIGATION
    $('nav a').on('click', function (e) { //click on nav
        e.preventDefault(); //prevent loading
        var url = this.href; //get UR: to load
        $('nav a.current').removeClass('current');
        $(this).addClass('current');
        $('#container').remove(); //remove old
        $('#content').load(url + ' #container').hide().fadeIn('slow'); // add new
    });
});

I'm not sure if it's an issue with the way I'm initiating .ajax or if my jquery isn't correctly implemented. I think it is. Any Thoughts?

我不确定这是我启动 .ajax 的方式的问题,还是我的 jquery 没有正确实现。我觉得是这样的。有什么想法吗?

edit: here's the html that goes with the script above

编辑:这是与上面的脚本一起使用的 html

<!DOCTYPE html>

<body>
    <header>
        <h1>UseTime</h1>
        <nav>
            <a href="jq-load.html">HOME</a>
            <a href="jq-load.html2">PROFILE</a>
            <a href="jq-load.html4">MANAGE TASKS</a>
            <a href="usetime.html">TIME TABLE</a>
        </nav>
    </header>
    <section id="content">
        <div id="container">
            <div class="third">
                <div id="event">
                    <a id="class1" href="class1.html"><img src="" alt="class1" /> Class 1 </a>
                    <a id="class2" href="class2.html"><img src="" alt="class2" /> Class 2 </a>
                    <a id="class3" href="class3.html"><img src="" alt="class3" /> Class 3 </a>
                </div>
            </div>
            <div class="third">
                <div id="sessions"> Select a Class from the left </div>
            </div>
            <div class="third">
                <div id="details"> Details </div>
            </div>
        </div>
        <!-- container -->
    </section>
    <!-- content -->

    <script src="js/jquery-3.2.1.slim.min.js"></script>
    <script src="js/example.js"></script>
</body>

回答by AdhershMNair

You are using slim version of jQuery. It Doesn't support ajax Calling. Use

您正在使用 jQuery 的精简版。它不支持ajax调用。用

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

instead of it.

而不是它。

Slim build

Sometimes you don't need ajax, or you prefer to use one of the many standalone libraries that focus on ajax requests. And often it is simpler to use a combination of CSS and class manipulation for all your web animations. Along with the regular version of jQuery that includes the ajax and effects modules, we've released a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code. The size of jQuery is very rarely a load performance concern these days, but the slim build is about 6k gzipped bytes smaller than the regular version – 23.6k vs 30k. These files are also available in the npm package and on the CDN:

苗条身材

有时您不需要 ajax,或者您更喜欢使用许多专注于 ajax 请求的独立库之一。通常,对所有 Web 动画使用 CSS 和类操作的组合更简单。除了包含 ajax 和效果模块的常规 jQuery 版本外,我们还发布了一个不包含这些模块的“瘦身”版本。总而言之,它不包括 ajax、效果和当前已弃用的代码。如今,jQuery 的大小很少成为负载性能问题,但瘦构建比常规版本小约 6k gzipped 字节 - 23.6k vs 30k。这些文件也可以在 npm 包和 CDN 上找到:

https://code.jquery.com/jquery-3.1.1.slim.js
https://code.jquery.com/jquery-3.1.1.slim.min.js

Referred from jQuery Blog

来自jQuery 博客

回答by Arun

jQuery 3 slim version doesn't support ajax.

jQuery 3 slim 版本不支持 ajax。

According to the release docs,

根据发布文档

Along with the regular version of jQuery that includes the ajax and effects modules, we're releasing a “slim” version that excludes these modules. All in all, it excludes ajax, effects, and currently deprecated code.

除了包含 ajax 和效果模块的常规 jQuery 版本外,我们还发布了一个不包含这些模块的“瘦身”版本。总而言之,它不包括 ajax、效果和当前已弃用的代码。

To use .ajaxmethod, simply use the full version one.

要使用.ajax方法,只需使用完整版一。

Try this one (jquery-3.2.1.min.js) instead of slim (jquery-3.2.1.slim.min.js)

试试这个 (jquery-3.2.1.min.js) 而不是 slim (jquery-3.2.1.slim.min.js)

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