괴발개발/Spring Framework

jQuery.Deferred exception : $.ajax is not a fuction TypeError : $.ajax is not a function 에러 해결방법

moonday 2021. 8. 30. 15:39

부트스트랩버전5를 사용하면서 써머노트를 이용해서 게시판 내용에 이미지를 추가할때, 용량을 좀 줄이려고 에이젝스를 쓰면, 개발자도구에 다음과 같은 문구가 뜸.

=>  jQuery.Deferred exception : $.ajax is not a fuction TypeError : $.ajax is not a function ..

 

더불어, 아까까지만해도 됐던 이미지가 input창에 들어가던게 안됨. 아무리 이미지를 업로드 insert 이런걸 눌러도 보이지가 않고 이미지 입력이 안되는 문제가 생김

 

아직까지는 써머노트에서 부트스트랩 버전4까지만 지원하고있는 관계로 lite버전을 써야했는데, slim이 들어가면 ajax로 이미지 업로드하는걸 지원해주지 않나봄.

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>

위에있는 코드를 아래의 코드로 바꿔주면 됨.

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

 

 

추가로 주의해야할 점!

1. 경로를 나타낼때 차이

serviceImp에 있는 이미지 경로는 \\(역슬래쉬)를 사용하고 servlet에있는 경로는 // 슬래쉬를 사용함.

 

2. DB에서 게시글 내용을 넣는 속성의 타입을 longtext로 설정해줄 것. 

 

3. 아래와같이 link가 제일 위에있는 순서이고 아래에 script순서가 나올 수 있도록 해줄 것

<link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>