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

Question

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

Ada*_*wuh 35 javascript ajax jquery typeerror

不知道出了什么问题,但我从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)

Run Code Online (Sandbox Code Playgroud)

从这个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
    });
});

Run Code Online (Sandbox Code Playgroud)

我不确定这是否是我启动.ajax的方式或者我的jquery没有正确实现的问题.我觉得是这样的.有什么想法吗？

编辑:这是上面脚本的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>

Run Code Online (Sandbox Code Playgroud)

Answer 1

Adh*_*air 108

您正在使用瘦身版的jQuery.它不支持ajax调用.使用

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

Run Code Online (Sandbox Code Playgroud)

而不是它.

纤细的构造

有时您不需要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

Run Code Online (Sandbox Code Playgroud)

从jQuery博客引用

'Getting Started' 下的 Bootstrap 示例模板加载精简版。必须在 https://code.jquery.com/ 上从他们的 CDN 中正确获取。 (3认同)
这个答案是纯金的..花了我两个小时。为什么他们要删除 AJAX - 它是 jQuery 最好的功能之一。 (2认同)
@AdhershMNair:当然 - 只是相信大多数应用程序都需要这个功能 (2认同)

Answer 2

Aru*_*run 10

jQuery 3 slim版本不支持ajax.

根据发布文档,

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

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

试试这个(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>

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年前
查看次数：	57556 次
最近记录：	7 年，1 月前