비동기 통신(Ajax)을 할 수 없는 경우의 대처법
소개
rails + jQuery에서 팔로우 기능을 비동기화 할 때,
팔로우 버튼을 클릭해도 화면이 전환되지 않고, 시행착오했기 때문에, 그 대처법의 일부를 소개합니다.
완성도
↑↓팔로우 버튼을 누르면 비동기로 반영됩니다
도달점
다음 1점 달성
· 대처법 배우기
흐름
① rails s로 로그 확인
② 개발자 도구 활용
① rails s로 로그 확인
rails s 하면 다음과 같은 로그가 표시됩니다.
마지막 행이 500 Internal Server Error
와 같은 표시이면 오류의 원인이 표시되므로 로그를 확실히 확인합시다.
이번에는 문제가 없었습니다.
② 개발자 도구 활용
개발자 도구 콘솔에서 원인을 알 수 있습니다.
개발자 도구 콘솔을 여는 방법
1) Chrome을 시작
2) 브라우저의 오른쪽 상단에 있는 세 개의 점 아이콘을 클릭합니다.
3) 기타 도구 > 개발자 도구를 선택합니다.
4) 콘솔 탭을 클릭합니다.
콘솔에서 확인
무엇인가 Uncaught ReferenceError: $ is not defined
라는 에러 표시가 있습니다.
구그라고 보면, application.html.erb에 이하의 기술이 없고 jQuery를 사용할 수 없었던 것이 원인인 것 같습니다.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
오류 처리는 로그나 콘솔에서 오류 문장이 나올 수 있으므로 확인하면 조치의 실마리를 찾을 수 있습니다.
Reference
이 문제에 관하여(비동기 통신(Ajax)을 할 수 없는 경우의 대처법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/holdout0521/items/8483a9cc3ec781130ecf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
다음 1점 달성
· 대처법 배우기
흐름
① rails s로 로그 확인
② 개발자 도구 활용
① rails s로 로그 확인
rails s 하면 다음과 같은 로그가 표시됩니다.
마지막 행이 500 Internal Server Error
와 같은 표시이면 오류의 원인이 표시되므로 로그를 확실히 확인합시다.
이번에는 문제가 없었습니다.
② 개발자 도구 활용
개발자 도구 콘솔에서 원인을 알 수 있습니다.
개발자 도구 콘솔을 여는 방법
1) Chrome을 시작
2) 브라우저의 오른쪽 상단에 있는 세 개의 점 아이콘을 클릭합니다.
3) 기타 도구 > 개발자 도구를 선택합니다.
4) 콘솔 탭을 클릭합니다.
콘솔에서 확인
무엇인가 Uncaught ReferenceError: $ is not defined
라는 에러 표시가 있습니다.
구그라고 보면, application.html.erb에 이하의 기술이 없고 jQuery를 사용할 수 없었던 것이 원인인 것 같습니다.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
오류 처리는 로그나 콘솔에서 오류 문장이 나올 수 있으므로 확인하면 조치의 실마리를 찾을 수 있습니다.
Reference
이 문제에 관하여(비동기 통신(Ajax)을 할 수 없는 경우의 대처법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/holdout0521/items/8483a9cc3ec781130ecf
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
개발자 도구 콘솔에서 원인을 알 수 있습니다.
개발자 도구 콘솔을 여는 방법
1) Chrome을 시작
2) 브라우저의 오른쪽 상단에 있는 세 개의 점 아이콘을 클릭합니다.
3) 기타 도구 > 개발자 도구를 선택합니다.
4) 콘솔 탭을 클릭합니다.
콘솔에서 확인
무엇인가
Uncaught ReferenceError: $ is not defined
라는 에러 표시가 있습니다.구그라고 보면, application.html.erb에 이하의 기술이 없고 jQuery를 사용할 수 없었던 것이 원인인 것 같습니다.
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
오류 처리는 로그나 콘솔에서 오류 문장이 나올 수 있으므로 확인하면 조치의 실마리를 찾을 수 있습니다.
Reference
이 문제에 관하여(비동기 통신(Ajax)을 할 수 없는 경우의 대처법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/holdout0521/items/8483a9cc3ec781130ecf텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)