반응형
javascript는 $.ajax는 함수가 아닙니다.라는 오류를 반환하고 있습니다.
뭐가 문제인지 모르겠지만 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가 올바르게 구현되지 않았는지 모르겠습니다.그런 것 같아요.무슨 생각 있어요?
edit: 위의 스크립트에 대응하는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 Calling을 지원하지 않습니다.사용하다
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
그 대신.
슬림한 체격
때로는 Ajax가 필요하지 않거나 Ajax 요청에 초점을 맞춘 많은 독립 실행형 라이브러리 중 하나를 사용하는 것을 선호합니다.또한 대부분의 경우 모든 웹 애니메이션에 CSS와 클래스 조작을 조합하여 사용하는 것이 더 간단합니다.ajax 및 effects 모듈을 포함하는 jQuery의 일반 버전과 함께 이러한 모듈을 제외한 "슬림" 버전을 출시했습니다.전체적으로 Ajax, effects 및 현재 사용되지 않는 코드는 제외됩니다.현재 jQuery의 크기는 부하 성능 문제가 거의 되지 않지만 슬림한 구조는 일반 버전인 23.6k와 30k보다 약 6k Gzip 바이트가 작습니다.다음 파일은 npm 패키지 및 CDN에서도 사용할 수 있습니다.
https://code.jquery.com/jquery-3.1.1.slim.js
https://code.jquery.com/jquery-3.1.1.slim.min.js
jQuery 블로그에서 참조
jQuery 3 슬림 버전은 Ajax를 지원하지 않습니다.
공개 자료에 따르면
ajax 및 effects 모듈을 포함하는 jQuery의 일반 버전과 함께 이러한 모듈을 제외한 "슬림" 버전을 출시합니다.전체적으로 Ajax, effects 및 현재 사용되지 않는 코드는 제외됩니다.
사용방법.ajax풀버전만 사용하면 됩니다.
슬림한(jquery-3.2.1.slim.min.js) 대신 이것(jquery-3.2.1.min.js)을 사용해 보세요.
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
언급URL : https://stackoverflow.com/questions/44212202/my-javascript-is-returning-this-error-ajax-is-not-a-function
반응형
'programing' 카테고리의 다른 글
| 워드프레스 포스트 루프 show post_name / slug (0) | 2023.03.12 |
|---|---|
| serde를 사용하여 예쁜 JSON 생성 (0) | 2023.03.12 |
| $_GET 및 Word Press (0) | 2023.03.12 |
| 파라미터를 사용하여 useCallback 응답 (0) | 2023.03.12 |
| responseType이 어레이 버퍼인 경우 $http에서 JSON 오류 응답을 읽는 방법 (0) | 2023.03.12 |