不知道出了什么问题,但是我从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)
通过此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 }); });
我不确定启动.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>
您正在使用jQuery的超薄版本。它不支持ajax调用。采用
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
代替它。
Slim build
有时您不需要ajax,或者您更喜欢使用专注于ajax请求的众多独立库之一。通常,对所有Web动画使用CSS和类操作的组合会更简单。与包括ajax和effects模块的jQuery常规版本一起,我们发布了一个“slim”版本,其中不包括这些模块。总而言之,它不包括ajax,效果和当前不建议使用的代码。如今,jQuery的大小很少会涉及到负载性能,但是苗条的构建比常规版本小6kgzip压缩字节,即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